vue3.0 区分生产环境，测试环境，正式环境

最新推荐文章于 2024-12-27 14:19:10 发布

有时间再优化

最新推荐文章于 2024-12-27 14:19:10 发布

阅读量5.2k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42340514/article/details/119864712

版权

vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1.在根目录下新建.env.xxx文件


.env.development     // 开发
.env.test			// 测试
.env.production		// 正式

2.测试环境

NODE_ENV = 'production'
// 测试环境和正式环境一样都是需要打包所以NODE_ENV都是'production'
VUE_APP_ENV = 'test'
// VUE_APP_ENV是我们自己取的用来区分环境的变量，为了和正式环境打包完的dist区分，我们指定测试环境的输出目录outputDir	
outputDir = 'test'//打包的包名

开发环境

NODE_ENV = 'development'
VUE_APP_ENV = 'development'

正式环境

NODE_ENV = 'production'
VUE_APP_ENV= 'production'
outputDir = 'dist'		// 打包目录名

文件中根据VUE_APP_ENV来区分不同环境

let allURL;
if (process.env.VUE_APP_FLAG == "development") {
  allURL = "http://t-web.zyzh.com";
} else if (process.env.VUE_APP_FLAG == "test") {
  allURL = "http://test-web.zyzh.com";
} else if (process.env.VUE_APP_FLAG == "production") {
  allURL = "http://api.bianjigntong.net";
}

console.log(allURL);  //配置完后可以打包分别看下测试环境和生产环境的地址

或者直接配置好，通过 process.env.outputDir 直接获取

如果分测试环境和正式环境，npm run build时会打包两次。修改根目录下的 package.json 文件

	// 在scripts中加入以下代码
	"scripts": {
		"serve": "vue-cli-service serve",
	    "build:prod": "vue-cli-service build --mode build",
    	"build:test": "vue-cli-service build --mode test",
    	"build": "vue-cli-service build --mode build && vue-cli-service build --mode test",
	}

	npm run build:prod   // 打包正式 dist 文件
	npm run build:test   // 打包测试 dist-test 文件
	npm run build		 // 打包 dist 和 dist-test 两个文件

参考链接：https://www.cnblogs.com/wangjae/p/12840896.html

https://blog.csdn.net/qq_40291247/article/details/112024926