vue-cli 3.0 webpack打包

最近在用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图片

难道我们代码一直都搞错了？
没错，是搞错了，但不是代码搞错了，是方式搞错了
index页面不能直接打开，需要在服务器上打开
这时我们需要安装serve

npm install serve -g(全局安装serve)

安装完成后直接用打开dist文件夹，复制给出的地址即可查看你的项目了（顺提一下，复制控制台文字的快捷方式，先右键，点击标记，选中要复制的内容，直接enter就行了）

serve -s dist

官方解释

官方解释

这时候，我们就跑完打包的全部流程啦~

补充：后期打包时，可能会遇到eslint报错，可参考这篇文章，我用的方法二，可以解决eslint报错的问题

报错信息

文章地址：https://blog.csdn.net/daqiang012/article/details/91419230

biu