使用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的模块；