由于公司的业务需求,需要把之前一些以hash模式运行的项目修改成history模式,
结果在本地调试都很正常,但在打包上线之后出现了白屏的问题,
资源引入正常,控制台也没有报错

// 看到官方文档说需要配置服务器,于是在本地Apache一顿改,但并没有解决,不过皇天不负有心人,让我找到了解决方法
其实原因也很简单:
项目如果不是在根目录下的话,router无法找到路径中的组件,所以也就无法渲染了,需要在mode后边添加属性base,设置应用的基路径,例如:
你的网站为www.xxx.com/new,那么base的值为:/new

这时候再编译上线会发现,页面可以正常渲染了!

但这时候发现有些资源会报404,嵌套路由也不能正常跳转了,很绝望
于是查了一下vue-cli3的文档,原文是这样的:
部署应用时的基本 URL。默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。
照着文档修改一下vue.config.js就把问题解决了!
网友评论