1、添加打包命令

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

命令：

• ①npm run build:dev 開發(fā)調式環(huán)境
• ②npm run build:prod 線上調試環(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對應）
• ② 線上：在根目錄下創(chuàng)建 .env.prod 文件（與package.json中mode對應）
  

在需要動態(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
##生產環(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 移除三方包

代碼細分：

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

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

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

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

module.exports = {
  // 打開文件訪問的相對路徑 獨立項目 通過項目根目錄訪問
  publicPath: './',
  // 開發(fā)時需要 線上不需要 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、打包發(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結尾的文件：

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'
    }
  },

瀏覽器查看：

• 請求頭：Accept-Encoding: gzip, deflate, br

• 響應頭：Content-Encoding: gzip

打包部署模式：

hash： 打包后dist直接在http容器中運行 線上一致

history： 打包后腳手架刷新不會404 線上會404
解決方案：需要前端代碼與后端一起部署 由后端負責跳轉前端

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

最新評論