vue分環境打包

說明

本文代碼中的配置基於vue-cli2

需求

在實際開發中咱們可能有測試環境一套請求API 和 正式環境一套API，尤爲是兩個環境的域名不一樣時，就須要咱們分環境打不一樣配置的包

瞭解 webpack.DefinePlugin 插件

DefinePlugin 此插件能夠在打包時定義環境變量，在開發時咱們也能在代碼中獲取定義的環境變量。

用法：

單獨配置

plugins: [
    new webpack.DefinePlugin({
      'process.env.mode': '"development"'
    })
    ...
]
複製代碼

寫成對象

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
        EVN_CONFIG: '"dev"',
        API_ROOT: '"dev API_ROOT"'
      }
    })
    ...
]
複製代碼

寫成配置文件

plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    })
    ...
]
複製代碼

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

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

複製代碼

在vue-cli2 中/build/webpack.dev.conf.js 文件引用了 /config/dev.env.js文件的配置做爲環境變量，所以咱們執行npm run dev時（執行/build/webpack.dev.conf.js）就能夠在咱們開發代碼中得到環境變量(console.log(process.env)試一試)

而後咱們觀察/build/webpack.prod.conf.js(npm run build時執行)

//  /build/webpack.prod.conf.js

const env = require('../config/prod.env')
...

new webpack.DefinePlugin({
  'process.env': env
}),
複製代碼

可見打包時使用的是/build/webpack.prod.conf.js文件配置做爲環境變量

安裝 cross-env

npm install --save-dev cross-env

cross-env 統一了不一樣操做系統設置環境變量的方式. 用法：

"scripts": {
    "build": "node build/build.js",
    "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js", //設置了環境變量 NODE_ENV 和 env_config
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", //設置了環境變量 NODE_ENV 和 env_config
  }
複製代碼

開始配置

由上面分析，咱們獲得，要分環境打包，咱們針對不一樣的環境去配置不一樣的環境變量就能夠了。

咱們先修改scripts腳本

// package.json
"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
複製代碼

咱們設置了兩個環境變量 NODE_ENV 和 env_config而後執行正常的打包。這裏的環境變量設置是方便咱們在webpack配置文件中使用

新建環境變量文件

新建 在/config目錄下新建test.env.js文件存放test的環境變量

//  /config/test.env.js
'use strict'
module.exports = {
    NODE_ENV: '"testing"',
    EVN_CONFIG:'"test"',
    API_ROOT:'"/test/apis/v1"'
}
複製代碼

修改 webpack.prod.config.js

我門註釋掉

//const env = require('../config/prod.env')
複製代碼

修改爲

//const env = require('../config/prod.env')
const env_config = process.env.env_config || ''; //執行不一樣的打包腳本對應不一樣的env_config值
switch (env_config){
  case 'test': 
        var env= require('../config/test.env');
        break;
  case 'prod': 
        var env= require('../config/prod.env');
        break;
  default:
      var env= require('../config/prod.env');
}
...
複製代碼

在代碼中使用

// Home.vue

axios.get(process.env.API_ROOT) ...
複製代碼

在不一樣環境中使用CDN

webpack 提供一個很是有用的配置，該配置能幫助你爲項目中的全部資源指定一個基礎路徑。它被稱爲公共路徑(publicPath)

咱們修改webpack中的 publicPath 來讓資源引用地址改成cdn 觀察vue-cli我門發現publicPath寫在了 /config/index.js文件的build對象中，因此咱們修改以下

...
const testCDN = 'https://testcdn.com';
const prodCDN = 'https://prodcdn.com';
build: {
  assetsPublicPath: process.env.env_config=='test'?testCDN:prodCDN
}
複製代碼

也能夠將cdn地址統一寫在上文中的環境配置文件中

var prodEnv = require('./prod.env');
var testEnv = require('./test.env');
...
build: {
 assetsPublicPath: process.env.env_config=='test'?testEnv.FILE_CDN:prodEnv.FILE_CDN,
}
複製代碼

總結

總體思路就是建不一樣的打包腳本，而後根據不一樣的打包腳本，應用相應的環境變量配置文件