最近在用vue开发项目，开发完成后想要打包测试，这时候问题就来啦，总结几个问题如下
1、如何打包
2、打包完成后页面报路径错误
3、百度后都是vue-cli2.0的解决方法
4、打包assets大小上限了
5、直接打开本地dist/index.html文件找不到
接下来就上面所提到的问题进行一一解决
解决问题1
首先，要用webpack打包肯定是要先安装啦
npm install webpack -g(全局安装webpack)
然后，cd到你的项目文件，运行打包代码
npm run build
这样，你的项目就打包完成了，是不是很简单！
别急，现在才是刚入坑
解决问题2
当你做完上面的操作后，兴致勃勃的找到项目文件下的dist文件夹，双击打开index.html,你会惊喜的发现-->一片空白
index.html报错
是的，你没看错，报错了，是路径引用错误。怎么办？不会呀！百度呗
解决问题3
好的，现在我们来到第三步了，我们小心翼翼的复制了控制台的报错信息，粘贴到百度上，一搜，果然，还是很多人跟我一样遇到这种问题的嘛
志同道合的人们
当你开开心心的点开进去，你会看到
看了几个，也都是这么说的，那可以，来试试，alt+tab熟练的切换回来，查找传说中的webpack.prod.conf.js文件，桥多麻跌，我好像，没有这个文件鸭~难道？没错，vue-cli3已经没有这个文件了，已经被整合了，现在只有一个，那怎么办呢？别急，再找一下，果然，功夫不负有心人，果然找到了解决办法，我们只需在根目录上创建一个vue.config.js文件，把下面这段代码复制进去就行了
module.exports = {
// 基本路径
publicPath: './',
// 输出文件目录
outputDir: 'dist',
// webpack-dev-server 相关配置
devServer: {
port: 8888,
}
}
顺便提一下，再次运行npm run build之前，如果有同时在使用同一个文件的，一定要关掉，不然会阻止进程导致报错
解决问题4
在运行上面代码打包过程中，如果你assets里面有大文件或者图片（一般都会有的，因为他限制初始大小为244k），就会报错，打包失败
这时候咋办捏？回到刚刚创建的js文件里，在module.exports 里面，丢多一段代码进去
//webpack配置
configureWebpack: {
//警告 webpack 的性能提示
performance: {
hints:'warning',
//入口起点的最大体积
maxEntrypointSize: 5000000000,
//生成文件的最大体积
maxAssetSize: 3000000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
}
顺带一下官网performance地址https://www.webpackjs.com/configuration/performance/
这时再打包就没问题了
解决问题5
这时我们再兴致勃勃的去打开index文件，竟然直接出现这个？
难道我们代码一直都搞错了？
没错，是搞错了，但不是代码搞错了，是方式搞错了
index页面不能直接打开，需要在服务器上打开
这时我们需要安装serve
npm install serve -g(全局安装serve)
安装完成后直接用打开dist文件夹，复制给出的地址即可查看你的项目了（顺提一下，复制控制台文字的快捷方式，先右键，点击标记，选中要复制的内容，直接enter就行了）
serve -s dist
官方解释
这时候，我们就跑完打包的全部流程啦~
补充：后期打包时，可能会遇到eslint报错，可参考这篇文章，我用的方法二，可以解决eslint报错的问题
文章地址：https://blog.csdn.net/daqiang012/article/details/91419230
