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、運(yùn)行打包代碼

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

下載serve： npm i -g serve

報(bào)錯(cuò)：

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

解決： 用戶—>個(gè)人用戶—>刪除.npmrc文件

啟動(dòng)打包后的目錄： serve dist

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

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

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

在需要?jiǎng)討B(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（免費(fèi)、收費(fèi)）
步驟：

• ①找到三方包cdn資源，添加到public/index.html

• ②把之前import導(dǎo)入的刪除
• ③在vue.config.js配置排除三方包

module.exports = {
  // 打開文件訪問的相對(duì)路徑 獨(dú)立項(xiàng)目 通過(guò)項(xiàng)目根目錄訪問
  publicPath: './',
  // 開發(fā)時(shí)需要 線上不需要 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ā)生錯(cuò)誤：

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

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

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

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

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

瀏覽器查看：

• 請(qǐng)求頭：Accept-Encoding: gzip, deflate, br

• 響應(yīng)頭：Content-Encoding: gzip

打包部署模式：

hash： 打包后dist直接在http容器中運(yùn)行 線上一致

history： 打包后腳手架刷新不會(huì)404 線上會(huì)404
解決方案：需要前端代碼與后端一起部署 由后端負(fù)責(zé)跳轉(zhuǎn)前端

到此這篇關(guān)于Vue前端打包的詳細(xì)流程的文章就介紹到這了,更多相關(guān)Vue前端打包詳細(xì)流程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！