如何使用Nodejs+Express去掉Vue-router产生的带#号的路径(完整版)
简介
我们都知道使用Vue-cli开发,难免要用到Vue-router,而由此会产生带#号的路由,比如 localhost:8081/#/home 。如果你有更好的解决方案,请略过,我也是个小白,不喜勿喷。
准备工作(假设你已经有一个完整能运行的Vue项目)
温馨提示,保证你的Vue-cli项目是可以运行并能访问的,另外说明以自己的项目为准,比如路径啥的不要照抄照搬,否则可能不能正常运行,准备完毕后,进行如下步骤:
- 设置好项目中关键的位置(这里主要是指打包程序代码的地方,比如webpack的webpack.config.js文件,或者是vue.config.js文件) ,那么找到以下位置:
//webpack.config.js文件
module.exports = {
publicPath: '/', //把这个路径设置为绝对路径也就是 '/' , 默认是 './'
productionSourceMap: false
//......
}
//vue.config.js文件
module.exports = {
assetsPublicPath: '/', //同样把这个路径设置为绝对路径也就是 '/' , 默认是 './'
productionSourceMap: false
//......
}
- 找到src/router下面的index.js 如下:
export default new Router({
mode: 'history', //把这里改为history模式
routes: [{
path: '/',
redirect: '/home'
}]
//......
})
- 细节问题,这些细节问题,我查了很多资料,没人告诉过我,所以我在这里分享给大家 ,首先,你的入口文件index.html里面如果有引用css文件,js文件等等等,都要设置为绝对路径,因为通常引用的是public下面的文件,也称静态文件,不光是index.html,所有src下面的文件中,只要引用了public下面的文件,都要设置为绝对路径,当然引用的时候我们知道public不用写,比如public目录下面有a.json文件,引用的时候直接写成 /a.json 即可,总结一句话:只要引用public下的文件,统统写成绝对路径;
- 运行打包程序 :
# npm run build
#这时候打包完生成一个dist目录的文件夹,接下来拷贝到我们的node+express根目录下
- 开始配置我们的Node+express项目,作为Vue项目的代理Web服务(如何搭建这里不做详述,望谅解,请自行查阅相关文档):首先安装中间件connect-history-api-fallback,关于使用说明请自行查阅GitHub上的文档。
//执行命令安装
npm i connect-history-api-fallback --save
- 配置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')));
//......
//......
- 假设在第4步中生成的dist文件夹已拷贝到node+express项目下 ,那么使用nodejs命令启动我们的app.js或者使用pm2启动app.js,此时就已经成功代理了我们的Vue-cli项目了;
# node app
# 或者
# pm2 start app.js --name myvuecli
此时就可以访问了,访问路径中 # 号没有了,完美!
总结
总体而言,查阅了很多资料,最终还是自己解决,非常想吐槽一下,那些号称解决问题的文章,两三句话,然后几大段代码,并没有什么意义,然并卵。所以还是自己研究的最好。也希望这能帮助到大家有需要的小伙伴们。如果阁下是大神,请略过。。总而言之,请仔细阅读步骤中的第3条。好了,就写到这,感谢支持!