Vue项目判断开发、测试、正式环境过程
更新时间：2022年04月18日 11:40:08 作者：Vincentzyc
这篇文章主要介绍了Vue项目判断开发、测试、正式环境过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
方法一
最简单的方法：通过判断location.href来判断环境
function env() {
if (process.env.NODE_ENV === "development") return "development"; //开发环境
if (window.location.href.includes('192.168')) return 'test'; //测试环境，"192.168"根据实际情况而定
return 'production' //线上环境
}方法二
适用于Vue Cli 2.x构建的项目
Vue Cli 2.x构建的项目只有npm run dev和npm run build两条开发和编译的命令。而要添加测试环境，我们可以扩展一条npm run test的命令输出测试环境下执行的代码。
1.在build文件夹中创建test.js文件
test.js中的代码很简单，就两行。主要就是配置一个环境变量用以区别测试和正式环境。这里没有直接修改原有的process.env.NODE_ENV是担心会影响到原本的逻辑。
注意：type的值必须单双引号两层嵌套，不能直接为’test’，否则会报错，具体代码如下：
// 配置环境变量 type 为 test
process.env.type = '"test"'
// 引入build.js文件，执行原先的编译代码
require('./build')2.修改config文件夹中的prod.env.js文件
配置好后就可以在项目代码中调用process.env.type了，代码如下：
module.exports = {
NODE_ENV: '"production"',
// 将上文设置的环境变量，赋值到 type 属性上
type: process.env.type
}3.在package.json文件中添加npm run test命令
添加一条命令，执行我们上文创建的test.js文件
"scripts": {
"dev": "node build/dev-server.js",
"test": "node build/test.js",
"build": "node build/build.js"
},4.在项目代码中判断环境
按照上述的步骤做完后，就可以在项目代码中写判断了
let baseURL
// 开发环境
if (process.env.NODE_ENV === 'development') {
baseURL = 'http://192.168.1.110:8080/'
// 编译环境
} else {
// 测试环境
if (process.env.type === 'test') {
baseURL = 'http://test.xxx.com/'
// 正式环境
} else {
baseURL = 'http://app.xxx.com/'
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了解决vue 局部过滤器获取不到this的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了vue-cli构建项目使用 less，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
本篇文章主要介绍了详解webpack打包vue时提取css，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
项目在线上会遇到管理员类似权限比较大的用户,会在同一浏览器登陆多个账号,遇到这样的问题如何处理呢,下面小编给大家介绍vue同一浏览器登录多账号处理方法,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要给大家介绍了关于vue在html标签{{}}中调用函数的方法总结及对比,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了vue.js使用Element-ui中实现导航菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue修改数据页面无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，本文给大家分享Vue3.0中快速上手Vuex状态管理的方式，本文通过实例代码讲解的很详细，对大家学习Vuex状态管理相关知识有很大的帮助，感兴趣的朋友一起学习吧2021-05-05
这篇文章主要介绍了vue嵌入本地iframe文件并获取某元素的值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家介绍了Vben Admin 多标签页状态管理源码学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论