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

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

vue项目打包后首页空白

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

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

vue项目打包后首页空白

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

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

vue项目打包后首页空白

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

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

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

 

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

相关文章:

  • 2022-12-23
  • 2021-05-16
  • 2021-08-27
  • 2022-12-23
  • 2022-12-23
  • 2022-01-21
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-06-29
  • 2021-10-15
  • 2022-01-16
  • 2022-01-13
相关资源
相似解决方案