Vue多環境配置

 

大家都知道，使用vue-cli腳手架生成的Vue項目只有開發環境和生產環境，然而在實際開發中，用到的不止這些環境，還包括測試環境，准生產環境等等。所以需要自己添加沒有的環境。

以測試環境為例，配置如下：

 

第一步：

package.json文件下scripts節點對象中新增一條屬性。

"test": "node build/build-test.js"

 

第二步：

在build文件夾下復制一份build.js，重命名為build-test.js。

修改build-test.js中的參數。

 

 

第三步：

在build文件夾下復制一份webpack.prod.conf.js，重命名為webpack.test.conf.js。

修改webpack.test.conf.js中的參數。

 

第四步：

修改webpack.base.conf.js中的參數。

 

修改vue-loader.conf.js中的參數。

 

第五步：

在config文件夾下復制一份prod.env.js，重命名為test.env.js。

修改test.env.js中的參數。

 

第五步：

各個環境全局參數配置

新建global.js，配置全局參數

在main.js中設置全局配置時，不可使用global做屬性名，vue.prototype中已包含只讀的global，需注意！！！

 

global.js

// 全局參數配置
export default {
  NODE_ENV: process.env.NODE_ENV,
  HTTP_API_URL: process.env.BASE_URL,
  WS_API_URL: process.env.WS_BASE_URL,
  WX_STATIC_URL: process.env.WX_STATIC_URL,
  SHARE_URL: process.env.SHARE_URL
}

 

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import global from '@/global/global'


// 全局參數配置
Vue.prototype.globalParams = global


/* eslint-disable no-new */
const app = new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

export default app

 

使用全局參數

this.globalParam.HTTP_API_URL

多環境啟動打包命令：

開發環境：

npm run dev

 

測試環境：

npm run test

 

生產環境：

npm run build

 

 　　感謝閱讀！！！