vue项目打包后首页空白

VUE项目在运行npm run build后会生产一个dist的文件夹,该文件夹里就是项目打包后的文件。但是当我们打开index.html文件后发现首页是空白的。出现这种情况主要是因为路径不正确导致导致,具体解决方案如下!

1.在config文件夹里找到index.js修改build配置,如下图assetsPublicPath默认是"/"修改修改成"./"

修改完成后我发现了首页可以正常打开了,但是发现项目中static文件下的img加载失败,原因也是因为路径错误;

先看下路径,下图中是我的static文件下的具体目录路径:

接下来我们要将路径修改正确:

1.找打build文件夹中的utils.js文件;新增下图框里的代码;

2.在vue文件中修改引入路径

CSS背景图需要由原先的路径增加上../../比如:  /static/img/background,jpg 修改成../../static/img/background.jpg

img图片需要增加../  比如:/static/img/img.jpg  修改成 ../static/img/img.jpg

 

按照以上的方式进行修改,VUE打包后的文件就可以正常显示了。

Supongo que te gusta

Origin blog.csdn.net/qq_36229632/article/details/103417923
Recomendado
Clasificación