Vue项目上线打包步骤

1.在vue.config.js中配置publicPath，只需给默认的添加一个“.”

{
  	publicPath: './'
}

2.在package.json中找打包命令，例如：bulid:pro，运行试试页面是否可以加载出来（运行dist下面的index.html）

yarn build:prod

3.懒加载优化，魔法优化，给打包后的js文件指定文件名

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")

4.生成打包工具,在package.json中添加 --report，生成打包报告

"build:prod": "vue-cli-service build --report"

5.在vue.config.js中添加如下代码，去除代码所有打印日志

chainWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
}

6.webpack配置排除打包，将第三方库不打包进自己的项目，存入CDN中。在vue.config.js中，添加externals和cdn,前提是判断一下是否是production环境，如果是的话，就执行，js语句不能写在对象中，所以将他们提出来，写在全局，可参考以下代码，只要在下面引入了css 文件，可以去main.js中注释相应的css文件。在vue.config.js全局中复制以下代码：

let externals = {}
let cdn = { css: [], js: [] }
// 判断是否是生产环境
const isProduction = process.env.ENV === 'production'
if (isProduction) {
  externals = {
    /**
     * externals 对象属性解析。
     *  基本格式：
     *     '包名' : '在项目中引入的名字'
     *
   */
    'vue': 'Vue',
    'element-ui': 'ELEMENTUI',
    'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/[email protected]/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js' // xlsx
    ]
  }
}

如果你忘记自己在项目中的名字，可以在src文件下，添加test/test.html，进行测试,例如测试element-ui的文件名，在浏览器的控制台输入window

在vue.congif.js下的model.exports中的configureWebpack添加externals，一定不要导入cdn，不然打包失败，cdn操作看步骤7

configureWebpack: {
  // 配置单页应用程序的页面的标题
  // 省略其他....
  externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

7.通过 html-webpack-plugin注入到 index.html之中，在vue.config.js中，设置

chainWebpack(config) {
//省略其他........ 
    
// 注入cdn变量 (打包时会执行)
    config.plugin('html').tap(args => {
      args[0].cdn = cdn // 配置cdn给插件
      return args
    })
}

8.找到 public/index.html 通过配置CDN Config 依次注入 css 和 js

    
    
    
    
    

      
+      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
+        
+        <% } %>


    
+    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
+      
+    <% } %>
  

9.运行npm run build:prod(看package.js中生成环境的命令)

到这里我们的项目已经打包完成了，如果还觉得太大，可以看自己的report报告，根据报告尽可能地将缩小，主要是通过懒加载和cdn缩小自己的项目