vue-cli 项目打包后打开页面空白_vue-cli打包的项目空白页

关于项目在打包后打开页面空白问题

在我们输入命令 npm run build 打包项目后在项目文件中会多出一个dist文件夹，打包后的文件就在该文件夹中，将里面的文件放在服务器上即可。

我第一次这样操作的时候，打开页面一片空白，调试模式下显示css,js全都是引入错误。

• 打开config文件夹下的 index.js 找到如下图所示区域：
  
  可以看到 assetsPublicPath 属性值为 ‘/’，这指的是项目的根目录，发布到线上以后 html 引用的路径是 /static/img/xxx.png 这样的。这时它会直接去请求服务器根目录下的文件，我们需要做的就是将 ‘/’ 改为 ‘./’ ，它指的是当前目录，在修改之后才会正确的去请求我们文件中的内容。
  

内容有了可是本地图片显示错误

在我们的项目刚刚打包好后打开我们可能会发现我们本地的图片加载不出来，打开调试发现他引用的路径是如下图的：

由此可见导致问题的原因仍然是路径问题，解决方法如下：
打开 build 文件夹下的 utils.js 文件，找到以下部分加入红框内的内容即可。

以上两步都处理了以后，重新打包项目，再次打开就能看到正常的页面啦。

再看引入的图片路径也从当前目录去获取文件内容了。