Vue打包项目时遇见的问题汇总

问题一

执行npm run build打包后的index.html文件打开为空白
控制台显示Failed to load resource: net::ERR_FILE_NOT_FOUND

解决方案

第一步，如图所示，打开build文件夹，找到webpack.prod.conf.js文件，为其中的output添加上publickPath:'./'

第二步，如图所示，还是在build文件下的webpack.prod.conf.js文件，修改output的publicPath属性的内容

 publicPath: process.env.NODE_ENV === 'production'
   ? './' +config.build.assetsPublicPath
   : './' + config.dev.assetsPublicPath,

问题二

打包之后element-icon的图标无法正确显示，变成了小方块

解决方案
如图所示，找到build文件夹，打开utils.js文件，修改publicPath:'../../'

问题三

打包之后的index.html文件无法打开

这种情况的时候，当你运行npm run build，打包完成的时候，还会看到这样的一个提示

 Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

分析
npm run dev是开发环境，npm run build是生产环境，再开发环境完成代码编写和测试之后，需要用生产环境生成代码

此外，vue-cli的默认配置中，publishPath是用的绝对目录，所以dist文件夹里的文件必须放在服务器的根目录，如果你想要在本地打开的话，可以尝试如下的方法

解决方案
打开config文件夹，找到index.js文件，修改build中的assetsPublicPath:'./'
注意这里是build中的assetsPublicPath，而不是dev中的assetsPublicPath

然后再进行打包，安装http-server，再使用hs命令运行，就可以拉

npm run build
cd dist
npm install -g http-server
hs

webpack项目打包出现空白的解决方案：https://blog.csdn.net/qq_43671996/article/details/102892158
webpack项目打包element ui图标变成小方块解决方案：https://blog.csdn.net/qq_42535651/article/details/102667363
webpack项目打包index.html无法直接打开的解决
方案一：https://www.jianshu.com/p/5c2ea77eda8f
方案二：https://blog.csdn.net/qq_37591637/article/details/101272538