最近有个项目，本来使用 jq + bootsrap 开发，因此首页用了 jq + bootsrap 开发为 html 页面，并用 jq 做了很多动画。

后来因为种种原因需要使用 vue 开发接下来的页面，但是重新做一个带多组动画的首页很麻烦，于是想到将首页home.html以及它的静态资源assest文件夹作为独立项目引入到 vue cli 中。

遇到了不少问题，第一天搞到凌晨2点，没搞明白，第二天不到1个小时搞定…

所以说，太累的话，工作效率不高，还浪费时间，还不如睡觉。!!!∑(ﾟДﾟノ)ノ

怎么做？

1 将 外部.html以及其静态资源assest文件夹放在 public 文件夹下

2 在需要跳转到 外部.html的地方添加 <a>标签链接

注意：在 vue cli 项目中访问 public 中的 html 页面，相对路径应该是这样的

<a :href="publicPath+'home.html'">首页</a>

<script>
export default {
  name: '',
  data () {
    return {
      publicPath: process.env.BASE_URL
    }
  }
  ...
</script>

这时候你就会发现可以通过点击对应的链接访问到 public 文件夹中的 html 页面的。

！！！但是！！！

当你点击回 vue 路由页面的时候就会出现 404 的问题，哪怕链接的对的，也会出现 404

我当时就卡在这样，纠结了一晚上，甚至<iframe>都用上了…

休息了一晚上，第二天重新定位问题。

发现出现 404 是因为浏览器在从外部 html 跳转到 vue 路由页面的时候，没有经过 vue cli 的 index.html，也就是说跳转的时候的没有 vue cli 在 index.html中的渲染操作。因此操不到路由页面，马上百度的了一下也证实了我的猜想。

淦，不讲武德…

怎么解决？

很简单，思路基本一样，在服务器上做改动：

当要访问的地址 404 的时候，就返回 index.html 就可以了。

那 404 页面都被返回 index.html 了，原本的 404 页面怎么办？

使用 vue 路由匹配规则#号匹配自定义 404 路由界面即可。

因为服务器有多种，我用的是node.js+express

它的现成的模块 connect-history-api-fallback

// 请保持在 express 之前引入
var history = require ( 'connect-history-api-fallback' );
var express = require('express');

app.use ( history ());

当然，tomcat，ngnix 都有对应的解决方法，思路都大同小异。请自行百度