Vue前端打包的詳細(xì)流程

更新時間：2021年11月17日 09:22:23 作者：一只燭

這篇文章主要介紹了Vue前端打包的詳細(xì)流程,下面文章圍繞Vue前端打包的相關(guān)資料展開詳細(xì)內(nèi)容,需要的小伙伴可以參考一下，希望對大家有所幫助

1、添加打包命令

package.json中添加配置
npm run build 發(fā)布到線上的代碼不便于調(diào)試

命令：

①npm run build:dev 開發(fā)調(diào)式環(huán)境
②npm run build:prod 線上調(diào)試環(huán)境

 "build:dev": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build --mode prod"

2、運行打包代碼

不可直接雙擊dist/index.html需要放在http容器中運行：serve tomcat nginx iis本次使用serve

下載serve： npm i -g serve

報錯：

Error: EPERM: operation not permitted, mkdir ‘C:\Program Files\nodejs\node global\node_modules.staging'

解決： 用戶—>個人用戶—>刪除.npmrc文件

啟動打包后的目錄： serve dist

3、打包指定不同的環(huán)境變量

添加環(huán)境變量：

① 開發(fā)：在根目錄下創(chuàng)建 .env.dev 文件（與package.json中mode對應(yīng)）
② 線上：在根目錄下創(chuàng)建 .env.prod 文件（與package.json中mode對應(yīng)）

在需要動態(tài)指定變量的位置使用process.env.NODE_ENV等

// .env.dev
##開發(fā)環(huán)境
NODE_ENV=development
##變量以VUE_APP_開頭
VUE_APP_URL=http://www.dev.com

// .env.prod
##生產(chǎn)環(huán)境
NODE_ENV=production
VUE_APP_URL=http://www.prod.com

4、打包自定義文件

vuecli是基于webpack
vuecli零配置
不需要零配置可以指定vue.config.js

npm run build:prod 少了注釋、空行、壓縮等

4.1 移除三方包

代碼細(xì)分：

①三方包：vue elementui axios等
②開發(fā)代碼：自己寫的

移出三方包： 使用三方提供cdn（免費、收費）
步驟：

①找到三方包cdn資源，添加到public/index.html
②把之前import導(dǎo)入的刪除
③在vue.config.js配置排除三方包

module.exports = {
  // 打開文件訪問的相對路徑 獨立項目 通過項目根目錄訪問
  publicPath: './',
  // 開發(fā)時需要 線上不需要 map-->提供代碼映射 方便調(diào)試代碼
  productionSourceMap: process.env.NODE_ENV == 'development' ? true: false,
  // 配置webpack
  configureWebpack: config =>{
    // config---vuecli默認(rèn)配置
    Object.assign(config,  {
      // 排除依賴包
      externals: {
        vue: 'Vue'
      }
    })
  },
}

4.2 gzip壓縮

下載 npm i -D compression-webpack-plugin

5、打包發(fā)生錯誤：

ERROR TypeError: Cannot read property ‘tapPromise' of undefined
TypeError: Cannot read property ‘tapPromise' of undefined

錯誤原因: 腳手架配置gzip打包不支持這個版本
解決: 使用npm install compression-webpack-plugin@6.1.1 --save-dev
在vue.config.js配置

打包會生成gz結(jié)尾的文件：

let CompressionWebpackPlugin = require('compression-webpack-plugin')

configureWebpack: config =>{
    let plugins = [
      new CompressionWebpackPlugin({
        // 壓縮方式
        algorithm: 'gzip',
        // 匹配壓縮文件
        test: /\.js$|\.css$/,
        // 對于大于10k壓縮
        threshold: 10240 
      })
    ]
    if(process.env.NODE_ENV == 'production') {
      config.mode = "production"
      config.plugins = [...config.plugins, ...plugins]
    } else {
      config.mode = 'development'
    }
  },

瀏覽器查看：