vue/cli 3.0配置NODE_ENV

　　原文地址

---

 

　　在项目开发中咱们须要配置环境变量，开发环境，生产环境和测试环境。在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为默认变量，会自动设置为上边对应的模式名称

　　变量必须以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设置production

"lint": "vue-cli-service lint" }, "dependencies": { } }

　　

添加.env.alpha文件

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

NODE_ENV = production

VUE_APP_URL=http://192.168.000.178/

测试

//在axios文件中引用接口地址
let config = {
  baseURL : process.env.VUE_APP_URL,
  timeout: 60 * 1000, // Timeout
  showLoading: true,
};

　　如今各个环境就会自动引用本身环境内的变量啦，须要注意的是NODE_ENV的名字打包时为production，开发运行为development，不然会形成环境找不到对应的模式配置，打包出的项目体积也会巨大无比。

　　

---

返回目录