Vue3.9打包后首页白屏

作为前端小白,最近开始学习vue,安装的是目前最新版本的vue cli3.9.2,并且通过vue ui控制台界面创建工程以及打包工程。在开发时运行正常,但是通过vue ui打包build  vue工程后出现白屏现象。

白屏原因

 按F12后,看控制台,发现静态资源加载路径错误:
 

Vue3.9打包后首页白屏_第1张图片

 踩坑

查询资料,网上都说vue cli 3版本以后,针对这种静态资源加载路径错误问题,需要修改vue.config.js(位于项目的根目录下)的publicPath,由默认的‘/’修改为‘./’

但是,通过vue ui 创建的工程一开始并没有vue.config.js这个文件

解决办法 

在vue ui的配置中修改公共路径为   ./  并保存

Vue3.9打包后首页白屏_第2张图片

 重新再任务中build工程。

Vue3.9打包后首页白屏_第3张图片

再看项目的根目录下,发现出现了vue.config.js文件,并且publicPath  值为  ‘./’

Vue3.9打包后首页白屏_第4张图片

你可能感兴趣的:(vue,打包,首页白屏,vue)