Vue3项目打包后白屏解决办法(针对Vue3&Vue-cli 4.0及以上)
  0nCUSW7oDL2N 2023年11月02日 60 0


在用最新的脚手架打包时,遇到了路径问题。

虽然是一个老生常谈的问题,但是查阅网上的资料发现大多是针对旧版本的框架进行webpack配置的更改来解决的。并不能用在我当前使用了最新的Vue3及其脚手架的项目上。

通过查看Vue3.x最新的文档结合旧版本的解决办法,我找到了针对最新版Vue框架下配置webpack而解决打包路径出错而白屏的办法:

由于在新的Vue中,目录层级结构发生改变,不再找得到bulid文件夹去设置index.js及其webpack的一些config.js。

Vue3项目打包后白屏解决办法(针对Vue3&Vue-cli 4.0及以上)_javascript


根据Vue3.x文档,我们将在 vue.config.js 统一对webpack、跨域、端口号等属性进行配置。

如图,在vue.config.js里的添加publicPath属性并将值更改成 ‘./’

Vue3项目打包后白屏解决办法(针对Vue3&Vue-cli 4.0及以上)_前端_02


2.若仍是白屏则去路由中将history模式设置成默认的Hash模式,history模式一般是服务器后端设置后才好使用,因此一般建议默认的Hash模式。

此处同Vue2的路由也有些许不同,在Vue2中我们通过mode:'Hash’可以直接更改模式,而在Vue3中,我们通过更改history属性调用的方法而更改模式

/router/index.js 下

Vue3项目打包后白屏解决办法(针对Vue3&Vue-cli 4.0及以上)_vue.js_03


若你原本项目中的不是这个方法,更改成使用createWebHashHistory()即可.


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
0nCUSW7oDL2N