vue项目打包后页面空白,静态资源(图片等)加载不出来

3,052 阅读1分钟

最近拿到公司的一个旧项目修改,VUE +WebPack脚手架搭建的项目,打包完成后发现背景图片引用的路径问题;

记录一下

通过修改配置文件,问题终于解决了,如下:

如果打包后页面空白,需要先修改这个地方

第一个配置问题

将项目打包为生产环境后,在dist文件夹下打开,会发现页面不显示。

1:打开config>index.js

2:在build对象找到assetsPublicPath,值改为‘./’

image.png

或者修改根目录的 vue.config.js

image.png

打包后页面静态资源不显示

1.修改资源路径
在VUE +的WebPack项目中,项目打包后的CSS和JS的引用路径是绝对路径,项目部署后会将静态当成根目录,就造成了文件引用路径的错误,解决方法是通过修改配置文件,将绝对路径改为相对路径。

具体操作如下:

1.打开webpack.prod.conf.js;

2.在output模块中添加  publicPath: './' ,如下图所示:

image.png

2.修改打包后背景图片的引用路径
资源内的图片是通过css加载的,CSS代码如:background:url(../ assets / img-bg / buttonbg.png)no-repeat;

但是打包过后的CSS变成了背景:url(../../ static / img / buttonbg.68979b3.png)no-repeat;我们需要修改配置文件,是的CSS代码打包后,资源引用路径还是相对路径;

解决办法:

1.打开build文件夹下的utils.js ;

2.在下图位置添加  publicPath:” ../../

image.png