2018年09月20日 | 1675
Vue设置路由History mode模式,打包 vue run build后页面不显示问题,404或者200但是空白页,一般开发的单页应用的URL都会带有#号的hash模式,因为业务需求,或者不想使用带#号,我们通常在路由index.js里面设置:
export default new Router({
mode: 'history',
这样URL不再会有#号,在Dev开发阶段一切都是正常的,可是打包发布之后,访问项目路径:一片空白,js,css加载正常(虽然显示访问正常200,但是并没有加载js,css文件,而是首页);这是因为你的项目打包dist并不是你服务器访问的跟目录,访问是http://xxx.xxx.com/dist,跟目录访问:http://xxx.xxx.com;由于包并不是根目录router路由无法找到路径中的组件,解决方法:
1、不是根目录,需要修改router中的index.js路由部分,在每个path中加上你项目名称就行了,这样就能够成功了
{
path: '/dist/',
redirect: '/dist/asd'
}
或者
{
path: '/',
redirect: '/asd'
}(不变)
在mode: 'history',之后添加
base: '/dist/',(推荐使用)
2、将dist目录设置为服务器跟目录即可。可能需要配合我前一篇文章 《vue打包后js和css、图片不显示,引用的字体找不到问题》 一起实现
3、如果访问出现 404错误(重点)
:
(1)apache需要修改httpd.conf:
LoadModule rewrite_module modules/mod_rewrite.so 将打开
文件最后添加:ErrorDocument 404 /index.html
(2)
nginx需要配置:
4、如果每次点击都会刷新页面,出现这个的原因是因为使用了window.location来跳转,只需要改为使用router路由跳转:
在main.js中配置中将router绑定到全局
import router from 'vue-router'