如何使用Nodejs+Express去掉Vue-router产生的带#号的路径（完整版）

简介

我们都知道使用Vue-cli开发，难免要用到Vue-router，而由此会产生带#号的路由，比如 localhost:8081/#/home 。如果你有更好的解决方案，请略过，我也是个小白，不喜勿喷。

准备工作（假设你已经有一个完整能运行的Vue项目）

温馨提示，保证你的Vue-cli项目是可以运行并能访问的，另外说明以自己的项目为准，比如路径啥的不要照抄照搬，否则可能不能正常运行，准备完毕后，进行如下步骤：

1. 设置好项目中关键的位置（这里主要是指打包程序代码的地方，比如webpack的webpack.config.js文件，或者是vue.config.js文件） ，那么找到以下位置：

//webpack.config.js文件
module.exports = {
   publicPath: '/', //把这个路径设置为绝对路径也就是 '/' , 默认是 './'
   productionSourceMap: false
   //......
}
//vue.config.js文件
module.exports = {
   assetsPublicPath: '/', //同样把这个路径设置为绝对路径也就是 '/' , 默认是 './'
   productionSourceMap: false
   //......
}

2. 找到src/router下面的index.js 如下：

export default new Router({
   mode: 'history',  //把这里改为history模式
   routes: [{
       path: '/',
       redirect: '/home'
   }]
   //......
})

3. 细节问题，这些细节问题，我查了很多资料，没人告诉过我，所以我在这里分享给大家 ，首先，你的入口文件index.html里面如果有引用css文件，js文件等等等，都要设置为绝对路径，因为通常引用的是public下面的文件，也称静态文件，不光是index.html，所有src下面的文件中，只要引用了public下面的文件，都要设置为绝对路径，当然引用的时候我们知道public不用写，比如public目录下面有a.json文件，引用的时候直接写成 /a.json 即可，总结一句话：只要引用public下的文件，统统写成绝对路径；
4. 运行打包程序 ：

# npm run build
#这时候打包完生成一个dist目录的文件夹，接下来拷贝到我们的node+express根目录下

5. 开始配置我们的Node+express项目，作为Vue项目的代理Web服务（如何搭建这里不做详述，望谅解，请自行查阅相关文档）：首先安装中间件connect-history-api-fallback，关于使用说明请自行查阅GitHub上的文档。

//执行命令安装
npm i connect-history-api-fallback --save

6. 配置app.js文件（注意：不要复制代码，这里只是部分代码） ：

//......
//......
const history = require('connect-history-api-fallback');
const indexRouter = require('./routes/index');

const app = express();
//配置中间件history模式
app.use(history({
//这部分自定义配置是根据项目需要，请根据各自项目需要配置
  rewrites: [
    {
      from: /^\/home\/*$/,
      to: function(context) {
        return context.parsedUrl.pathname;
      }
    },
    {
      from: /^\/view\/*$/,
      to: function(context) {
        return context.parsedUrl.pathname;
      }
    }
  ]
}));
//注意要配置在静态文件目录之前，如下是配置静态文件目录
app.use(express.static(path.join(__dirname, 'dist')));
//......
//......

7. 假设在第4步中生成的dist文件夹已拷贝到node+express项目下 ，那么使用nodejs命令启动我们的app.js或者使用pm2启动app.js，此时就已经成功代理了我们的Vue-cli项目了；

# node app
# 或者
# pm2 start app.js --name myvuecli

此时就可以访问了，访问路径中 # 号没有了，完美！

总结

总体而言，查阅了很多资料，最终还是自己解决，非常想吐槽一下，那些号称解决问题的文章，两三句话，然后几大段代码，并没有什么意义，然并卵。所以还是自己研究的最好。也希望这能帮助到大家有需要的小伙伴们。如果阁下是大神，请略过。。总而言之，请仔细阅读步骤中的第3条。好了，就写到这，感谢支持！