Vue前端打包的詳細流程

阿新 • • 發佈：2021-11-19

1、新增打包命令

package.on中新增配置
npm run build 釋出到線上的程式碼不便於除錯

命令：

①npm run build:dev 開發調式環境
②npm run build:prod 線上除錯環境

Vue前端打包的詳細流程

 "build:dev": "-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

Vue前端打包的詳細流程

3、打包指定不同的環境變數

新增環境變數：

① 開發：在根目錄下建立 .env.dev

檔案（與package.json中mode對應）
② 線上：在根目錄下建立 .env.prod 檔案（與package.json中mode對http://www.cppcns.com應）

在需要動態指定變數的位置使用process.env.NODE_ENV等

Vue前端打包的詳細流程

// .env.dev
##開發環境
NODE_ENV=development
##變數以VUE_APP_開頭
VUE_APP_URL=http://www.dev.com

// .env.prod
##生產環境
NODE_ENV=production
VUE_APP_URL=http://www.prod.com

4、打包自定義檔案

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

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

4.1 移除三方包

程式碼細分：

①三方包：vue elementui axios等
②開發程式碼：自己寫的

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

①找到三方包cdn資源，新增到public/index.html
②把之前import匯入的刪除
③在vue.config.js配置排除三方包

module.exports = {
  // 開啟檔案訪問的相對路徑 獨立專案 通過專案根目錄訪問
  publicPath: './',// 開發時需要 線上不www.cppcns.com需要 map-->提供程式碼對映 方便除錯程式碼
  productionSourceMap: process.env.NODE_ENV == 'development' ? true: false,// 配置webpack
  configureWebpack: config =>{
    // config---vuecli預設配置
    Object.assign(config,{
      // 排除依賴包
      externals: {
        vue: 'Vue'
      }
    })
  },}

4.2 gzip壓縮

下載 npm i -D compression-webpack-plugin

5、打包發生錯誤：

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

錯誤原因: 腳手架配置gzip打包不支援這個客棧版本
解決: 使用npm install [email protected] --save-dev
在vue.config.js配置

打包會生成gz結尾的檔案：

Vue前端打包的詳細流程

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

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

瀏覽器檢視：