基於Vue + webpack + Vue-cli 實現分環境打包項目

需求由來：我公司項目上線發佈至服務器分爲三個環境分別爲測試環境、預發佈環境、生產環境；前期作法是項目經過腳步打包時由腳步把域名和後綴名之類的所有替換成要發佈的環境所須要的，由於我公司的項目比較大由許許多多項目經過node分發集成的，後續每添加一個項目就要在發佈腳步上更改替換之類的，公司運維以爲很麻煩很浪費時間，因而開會提出分模塊打包。經過各類百度、谷歌終於搞定，至於怎麼實現，讓咱們接着住下看：

第1步：安裝cross-env

在項目目錄下運行以下命令安裝cross-env，個人ide編輯器是webstorm，能夠直接在ide裏的Terminal窗口中運行。

npm i --save-dev cross-env 

第2步：由於Vue-cli 只給咱們提供了預發佈環境和生產環境；這時就須要咱們本身再添加一個環境以及修改各環境下的參數

在項目 config 目錄下添加 stag.env.js。而且修改自帶的 dev.env.js、prod.env.js 裏的內容，修改後的內容以下：

1. config/dev.env.js

// dev.env.js
'use strict' const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

2. config/stag.env.js

// stag.env.js
'use strict' const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"stag"'
})

3. config/prod.env.js

// prod.env.js
'use strict' module.exports = {
  NODE_ENV: '"production"'
}

 

第3步：修改項目package.json文件 

對 package.json 文件中的 scripts 內容進行個性化，添加上新定義的幾種環境的打包過程，裏的參數與前面的調協保持一致。

// 紅字部分爲添加的
"scripts": {
  "dev": "node build/dev-server.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:dev": "cross-env NODE_ENV=production env_config=dev node build/build.js",
  "build:stag": "cross-env NODE_ENV=production env_config=stag node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
  "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run unit && npm run e2e",
  "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},

在這裏，NODE_ENV 最好都設成 production，由於在 utils.j s只作了production一種斷定，親測不會影響各環境API參數。

 

第4步：修改config/index.js文件中build參數    這裏的參數會在 build/webpackage.prod.conf.js 中使用到

build: {
  // 添加test pre prod 三處環境的配製
  devEnv: require('./dev.env'),
  stagEnv: require('./stag.env.js'),
  prodEnv: require('./prod.env'),
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static'
},

 

第5步：在webpackage.prod.conf.js中使用構建環境參數

對 build/webpackage.prod.conf.js 文件進行修改，根據打包命令匹配env常量的生成方式。

// 紅字部分爲修改的  綠色爲修改部分
const env = config.build[process.env.env_config+'Env']
// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/stag.env.js')
//   : config.build.env

 

第6步：調整build/build.js

註釋process.env.NODE_ENV的賦值，且修改spinner的定義，調整後的內容以下：

// 紅字部分爲添加的  綠色爲修改部分
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

// const spinner = ora('building for production...')
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()

 

第7步：對項目主入口 main.js 進行域名賦值操做

建議整個項目的域名和後綴這些都統一管理了即只在一個地方進行賦值操做，其餘文件不要有寫死的狀況  命令行分別運行npm run build:dev 、 npm run dev:stag 、npm run dev:prod  在運行打包後的文件看控制檯打印的什麼就知道哪一個環境了

// main.js 動態設置環境
console.log(process.env.NODE_ENV)  // 看輸出的是什麼就知道是哪一個環境了 if (process.env.NODE_ENV === 'development') {
  // dev環境
  window.localStorage.gatewayDomain = 'https://dev-ceshi.lan/'
  window.localStorage.cookieDomain = '.dev-ceshi.lan'
} else if (process.env.NODE_ENV === 'stag') {
  // stag預發佈環境
  window.localStorage.gatewayDomain = 'https://stag-ceshi.gc-life.cn/'
  window.localStorage.cookieDomain = '.stag-ceshi.cn'
} else if (process.env.NODE_ENV === 'production') {
  // 生產環境
  window.localStorage.gatewayDomain = 'https://stag-ceshi.com/'
  window.localStorage.cookieDomain = '.stag-ceshi.com'
}

 

第8步：擴展

問題拋出：當公司更換某個環境的域名和後綴時，這時就尷尬了，假若有20個項目豈不是一個一個項目去改（我公司就有這狀況），這時就能夠經過後臺接口的形式把一些域名之類的經過接口返回前端，同樣的道理只需在 main.js 或者 App.vue 裏判斷環境再分別調用後臺接口賦值就好了。

if (process.env.NODE_ENV === 'development') {
  // dev環境
  這裏調用接口就好了在進行賦值
}

 

第9步：測試驗證： 修改config/index.js文件中assetsPublicPath參數 

// 紅色爲修改部分
build: {
  // 添加test pre prod 三處環境的配製
  devEnv: require('./dev.env'),
  stagEnv: require('./stag.env.js'),
  prodEnv: require('./prod.env'),
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
  productionSourceMap: true,
}

 

經過以上修改以後本身就能夠在本地測試打包項目在運行index.html文件看控制套打印輸出  process.env.NODE_ENV  是什麼就能驗證了！若打包的文件中圖片不能正常顯示則修改 build 文件夾下的 utils.js 添加一行代碼

// 紅色爲修改部分
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'，
　　 publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

 

以上就是分模塊打包所需修改的配置及內容了，親測有效，我公司全部項目都是這樣的，當你須要打包預發佈環境時運行npm run build:stag  或者打包生產環境時 運行npm run build:prod 便可， 若結合請求的統一管理則更是beautiful 提升代碼質量

總結

以上所述是小編給你們介紹的Vue項目分環境打包的實現代碼，但願對你們有所幫助，若是你們有任何疑問請給我留言，小編會及時回覆你們的。