vue2 | vue3如何做动态环境 vue-cli-service 指定环境模式

摘要：解决在vue2.0和vue3.0项目开发中通过命令来切换接口域名地址

vue2.0：

原本在项目的结构文档中是存在配置的

如图所示： 这里vue cli已经给我们配置好了 测试环境地址、和生产环境 。

在package.json 文件中已经有相关配置了 有我们默认的几个指令。dev\build 等等。

我们要新增一个其他的环境比如准生成、测试环境哪如何搞呢：

1. 在config新建test.env.js文件
   

2. 在build中复制原有的webpack.prod.conf.js文件改名为webpack.test.conf.js 中更改 env
   

3. 然后我们在package.json 中进行配置

"scripts": {
		"prod": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js",
		"test": "webpack-dev-server --inline --progress --config build/webpack.test.conf.js",
		"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
		"start": "npm run dev",
		"build": "node build/build.js",
		"build_test": "node build/build_test.js"
},

项目中通过 【process.env.API_ROOT】获取就好 ps: process：存在nodejs中的一个全局变量

vue3.0

1. 项目根目录下创建如下文件、我这里创建的就基本的根据自己需求来
   

2. 内容如下
   

注意： VUE_APP_自定义名称：只有以 VUE_APP_ 开头的变量会被使用
我们要设置NODE_ENV 、否则在webpack在打包输出文件层级的时候会有问题 默认是production

3. 在package.json 中配置

	"scripts": {
	    "serve": "vue-cli-service serve --mode dev",
	    "build.test": "vue-cli-service build --mode test",
	    "build": "vue-cli-service build  --mode prod",
	    "lint": "vue-cli-service lint"
	  },

命令：

yarn serve
Compiles and minifies for production
yarn build //生产环境
yarn build.test //测试环境

-END-

.