在vue项目的日常开发中，区分开发、测试和生产环境极其重要，如果不区分就很容易弄混。

该如何区分呢？

第一步

在项目根目录，注意是项目根目录，跟vue.config.js、src文件夹同级。

文件： .env.production

NODE_ENV = "productionDwp"
VUE_APP_TITLE = "productionVUE_APP_TITLEDwp"

文件： .env.test

NODE_ENV = "productionDwp"
VUE_APP_TITLE = "testVUE_APP_TITLEDwp"

第二步

在package.json文件中修改命令配置

{...
"scripts": {"serve": "vue-cli-service serve --mode serveDwp","dev": "vue-cli-service serve --mode devDwp","build": "vue-cli-service build --mode production","test": "vue-cli-service build --mode test"},
...
}

以上配置完成后

可以在整个项目中获取到以下变量(几乎所有地方)

console.log('---------------------------dwpnb---------------------------');
console.log('process.env.npm_lifecycle_event', process.env.npm_lifecycle_event);
console.log('process.env.npm_config_argv', process.env.npm_config_argv);// console.log(process.env.BABEL_ENV); // development 开发 || production 生产
// 开发 vue-cli-service serve --mode devDwp            console  =》  process.env.BABEL_ENV development
// 生产 vue-cli-service build --mode production        console  =》  process.env.BABEL_ENV production
// 测试 vue-cli-service build --mode test              console  =》  process.env.BABEL_ENV test
console.log('process.env.BABEL_ENV', process.env.BABEL_ENV);// 开发 vue-cli-service serve --mode devDwp            console  =》  process.env.NODE_ENV development
// 生产 vue-cli-service build --mode production        console  =》  process.env.NODE_ENV productionDwp
// 测试 vue-cli-service test --mode test               console  =》  process.env.NODE_ENV productionDwp
console.log('process.env.NODE_ENV', process.env.NODE_ENV);// 开发 vue-cli-service serve --mode devDwp            console  =》  process.env.VUE_APP_TITLE undefined
// 生产 vue-cli-service build --mode production        console  =》  process.env.VUE_APP_TITLE productionVUE_APP_TITLEDwp
// 测试 vue-cli-service test --mode test               console  =》  process.env.VUE_APP_TITLE testVUE_APP_TITLEDwp
console.log('process.env.VUE_APP_TITLE', process.env.VUE_APP_TITLE);
console.log('---------------------------dwpnb---------------------------');

实例

区分不同环境搭建的不同后台环境

let envone = "";
switch (process.env.VUE_APP_TITLE) {case 'testVUE_APP_TITLEDwp': // 这里具体可以值为  .env.test 文件中配置的envone = '测试环境地址'breakcase 'productionVUE_APP_TITLEDwp':  // 同理以上envone = '生产地址'breakdefault:envone = '默认开发地址'
}
export {envone,
}

最后

能不能求个赞和关注。

不明白的同学可以留言讨论。

有问题的同学也可以留下自己的意见

欢迎指教~

=================================2021.07.31 ==============================

在html文件中使用
在public的静态文件中可以用这种插值语法获取到值

 // 是否开启 启动动画 true 开启 false 关闭let startAnimation = !true;// 生产环境const VUE_APP_TITLE = <%= process.env.VUE_APP_TITLE %>;if (VUE_APP_TITLE == "productionVUE_APP_TITLE") startAnimation = true;

vue项目如何区分开发、生产和测试环境相关推荐

Vue项目实战：接口错误拦截与环境设置
(一)接口错误拦截使用场景: 统一报错未登录拦截请求值.返回值统一处理使用axios插件进行拦截: 安装axios npm i axios --save-dev 在main.js文件中加入: ...
vue项目打包之后放在服务器上测试的时候访问不到本地json数据的解决方法
上面的代码表示在本地开发项目时模拟后端数据.项目打包之后放在服务器上,json的路径需要按照原来的json实际路径放置才会访问到(/api/index.json)
如何管理项目中外包开发人员、测试人员
2019独角兽企业重金招聘Python工程师标准>>> 思考中--- 1.与项目验收捆绑 2.绩效考核,过程监管转载于:https://my.oschina.net/u/13955 ...
我是如何成功准备VUE项目之前的开发环境？
提前安装好node, 参考我上一篇文章--------> 不同node.js版本 1.从git上把代码拷贝下来. git clone +项目地址. 2.cmd模式下安装n ...
如何使用微服务+vue项目进行模块化开发
1.数据库:安装导入user 5个表 2.安装redis插件. 3.导入后台启动后台:等待安装依赖.启动redis.zc注册中心.网关.认证中心.业务1. 关键字爆红 maven解决不了就是导入的问题 ...
搭建S3C6410开发板的测试环境
1.开发板是开发和学习嵌入式技术的主要设备.OK6410开发板基于三星公司最新的ARM11处理器S3C6410,对三星S3C6410的性能做出了完美诠释,拥有强大的内部资源和视频处理能力,可稳定运行在 ...
安卓驱动开发（五）----搭建开发板的测试环境
在第四章中,介绍的是安卓应用程序开发环境和linux内核开发环境.这两套开发环境都是linux开发和测试的前提.有了两套开发环境,接下来就应该考虑,测试好的linux驱动应该在哪里运行,运行环境是什么 ...
VUE项目保存照片到本地（微信环境不可行）
注意:微信环境不可行的原因是微信浏览器禁用了这个下载的脚本操作. <van-button type="info" @click="saveImg"> ...
项目开发过程中什么是生产环境、UAT环境、仿真环境、开发环境、测试环境？
开发环境,测试环境,生产环境也可以说是系统开发的三个阶段:开发->测试->上线,其中生产环境也就是通常说的真实环境. 执行步骤:开发完成,测试环境测试,保证程序没有问题后,再上传到生产环境 ...

vue项目如何区分开发、生产和测试环境

该如何区分呢？

第一步

文件： .env.production

文件： .env.test

第二步

以上配置完成后

实例

最后

vue项目如何区分开发、生产和测试环境相关推荐

最新文章

热门文章