使用vue在開發中的一些小問題--利用環境變量做一些常量的定義

1、集中式的環境配置：

（1）使用vue-cli基本上不用去處理什么，只需要在config文件夾下的文件中配置寫既可：

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

注意里面的引號關系，接着就是在webpack的配置中定義plugin：webpack.define.plugin；

webpack.dev.conf.js

插件會在編譯時定義一個全局的常量變量，在你所需要的地方直接使用process.env.BASE_URL就可以取到值；

（2）這一種方式是在js中添加的環境變量的控制：

package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server",
    "build": "cross-env NODE_ENV=production webpack --env.minimize"
  },

這種方式是通過cross-env在js中幫助聲明環境變量；通過環境變量可以將不同的配置分配到不同的環境中，比如一些需要的域名，常量變量等等；不過最后都是需要webpack.define.plugin插件中定義，插件會在編譯時定義一個全局的常量變量，在你所需要的地方直接使用process.env.BASE_URL就可以取到值；

 

一般的做法：

集中定義管理:

這樣定義好了以后，還需要做些處理，將其序列化一下：

let env;
switch (process.env.NODE_ENV) {
  case "production":
    env = require("./prod.env");
    break;
  case "production.test":
    env = require("./prod.test.env");
    break;
  case "production.test2":
    env = require("./prod.test2.env");
    break;
  default:
    env = require("./dev.env");
    break;

}

Object.keys(env).forEach(_key => {
  env[_key] = JSON.stringify(env[_key])
});

module.exports = env;

 

 根據js中的cross-env NODE_ENV=development 去判斷應該取哪個文件中的配置，導出的env最后會在定義webpack.define.plugin的地方使用；將其轉換成一個全局的常量變量而直接使用；所以這種方式需要安裝cross-env的模塊；