vue使用history模式踩坑
温馨提示:
本文最后更新于 2022年09月14日,已超过 374 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我。
vue-router使用history模式需要注意几点
开发环境需要配置一下vue.config.js的
publicPath: '/', //这里需要注意
devServer: {
historyApiFallback: true // 这里需要设置为true
},
还有就是index.html里面引用js和css如果是cdn形式引入的话就没影响,但是如果是引用本地的资源就需要更改一下引用路径
接下来就可以到router.js里面更改mode为history了
const router = new VueRouter({
mode: 'history',
routes,
});
生产环境需要配置服务器
appahe的是
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx的
location / {
try_files $uri $uri/ /index.html;
}
需要注意的是这样配置的话一旦用户输入的路径没有对应的路由,页面会出现空白的情况,所以如果有需要的话可以准备相应的404和500的页面
正文到此结束
- 本文标签: vue vue-router
- 本文链接: http://constblog.com/article/2
- 版权声明: 本文由hhhero原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权