众所周知,Vue项目打包(运行npm run build)之后会生成一个dist文件夹,dist文件夹里有一个static文件夹和一个index.html页面,这个index就是单页面的最终文件。我们一般都是把dist文件夹部署到服务器上。

但是我直接打开index.html,发现页面显示的是一片空白,打开控制台发现报了一堆找不到文件的error:

于是我看了下代码,应该是路径不对,应该是 './static/...' 而非 '/static/...' 。

此时来到config/index.js文件中,发现assetsPublicPath:'/','/'是根目录,显然index.html文件的根目录是系统盘,在系统盘目录下找static文件夹肯定是找不到的,所以我们要把assetsPublicPath属性的值改为'./'(当前目录)

修改好之后,重新打包之后打开index.html,页面出来了,查看elements也发现路径对了:

但是图片和字体图标等静态资源没有正确显示出来,控制台报以下错误:

发现图片和字体等请求路径不对!比如loginbg的正确路径应该是:file:///E:/ztt/hzaspt/hzaspt-front/dist/static/img/loginbg.8250815.jpg

前端代码如下:

但是打包之后,图片的路径应该是 './static/img/loginbg.jpg',原因就在这里。

此时我们只需要找到build/util.js文件,在 'vue-style-loader' 之后加一行:publicPath: '../../',就可以解决问题了。

重新打包之后,打开index.html,页面一切正常!

Logo

前往低代码交流专区

更多推荐