Vue

　　原文地址

---

 

　　在项目开发中我们需要配置环境变量，开发环境，生产环境和测试环境。在cli 2.0的版本中我们是通过在config文件夹进行配置的，vue/cli 3.0相对简单，只需要在项目根目录创建.env文件即可。以下是环境对应文件名和命令

模式	对应npm命令	对应文件名称
development	server	.env.development
production	build	.env.production
test	test	.env.test

　　

　　注意： process.env.NODE_ENV为默认变量，会自动设置为上边对应的模式名称（test的我没试过，请自行校验）

　　变量必须以VUE_APP_开头
　　被载入的变量将会被vue-cli-service的所有命令、插件、依赖可用。

 　　

自定义模式

现实总是残酷的，默认的三种模式也许并不能满足我们的所有使用场景，使用自定义模式可以很好地解决这个问题。
我们开始创建一个 alpha 模式

修改package.json

添加一行命令"alpha": "vue-cli-service build --mode alpha"
实际效果

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve", //本地开发运行，会把process.env.NODE_ENV设置为'development'
    "build": "vue-cli-service build", //默认打包模式，会把process.env.NODE_ENV设置为'production'
    "alpha": "vue-cli-service build --mode alpha", //自定义打包模式，会把process.env.NODE_ENV设置为文件内定义的名称
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
  }
}

　　

添加.env.alpha文件

在项目根路径创建.env.alpha文件，内容为

NODE_ENV = 'alpha'

测试

　　创建下边js文件，在页面中引用

let baseUrl = "";   //这里是一个默认的url，可以没有
switch (process.env.NODE_ENV) {
    case 'development':
        baseUrl = "http://localhost:8888/"  //这里是本地的请求url
        break
    case 'alpha':   // 注意这里的名字要和设置的模式名字对应起来
        baseUrl = "http://alpha.edik.cn/"  //这里是测试环境中的url
        break
    case 'production':
        baseUrl = "https://www.edik.cn/"   //生产环境url
        break
}
export default baseUrl;

　　

---

返回目录