Vue 上线部署遇到的问题
vue上线部署遇到的问题解决方案
·
1,解决跨域问题,设置反向代理
然后编辑配置文件,将下图选中部分删掉
反向代理就设置ok啦,然后开心的打开项目,发现跳转过页面后,浏览器不能刷新,一刷新就出现404页面。
这个解决办法就是修改配置文件可以实现
Apache配置如下:
<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了。
但是这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*',name:'NotFoundComponent',component: NotFoundComponent }
]
})
如果上图配置完后出现了 Uncaught Error: Invalid path "*"
就把 " * " 改成 " /:pathMatch(.*) "
实列代码如下:
{ path: '/:pathMatch(.*)', name:'NotFoundComponent',component: NotFoundComponent }
更多推荐
已为社区贡献1条内容
所有评论(0)