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-cli中devServer.proxy相关配置项的使用

    vue-cli中devServer.proxy相关配置项的使用

    这篇文章主要介绍了vue-cli中devServer.proxy相关配置项的使用详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue路由导航守卫和请求拦截以及基于node的token认证的方法

    vue路由导航守卫和请求拦截以及基于node的token认证的方法

    这篇文章主要介绍了vue路由导航守卫和请求拦截以及基于node的token认证的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 如何巧用Vue缓存函数浅析

    如何巧用Vue缓存函数浅析

    有时候不希望已经请求过的数据,再次请求重复执行刷新操作,我们就需要使用数据缓存,这篇文章主要给大家介绍了关于如何巧用Vue缓存函数的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue3+Vite项目部署后刷新白屏问题的解决方法

    Vue3+Vite项目部署后刷新白屏问题的解决方法

    Vue3 + Vite 项目部署后出现了手动刷新页面时出现白屏的问题,下面小编就来和大家探讨一下白屏出现的原因以及具体的解决方法,需要的可以参考下
    2025-03-03
  • 在vue使用echarts报错:invalid dom问题

    在vue使用echarts报错:invalid dom问题

    这篇文章主要介绍了在vue使用echarts报错:invalid dom问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 解决Vue项目中tff报错的问题

    解决Vue项目中tff报错的问题

    这篇文章主要介绍了解决Vue项目中tff报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue3+uniapp 上传附件的操作代码

    vue3+uniapp 上传附件的操作代码

    uni-file-picker搭配uni.uploadFile在使用问题上踩了不少坑,我至今还是没办法在不改uniapp源码基础上实现限制重复文件的上传,这篇文章介绍vue3+uniapp 上传附件的操作代码,感兴趣的朋友一起看看吧
    2024-01-01
  • Vue引入sass并配置全局变量的方法

    Vue引入sass并配置全局变量的方法

    这篇文章主要介绍了Vue引入sass并配置全局变量的方法
    2018-06-06
  • vue封装组件js版基本步骤

    vue封装组件js版基本步骤

    这篇文章主要为大家介绍了vue封装组件js版基本步骤,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • 对vue中的input输入框进行邮箱验证方式

    对vue中的input输入框进行邮箱验证方式

    这篇文章主要介绍了对vue中的input输入框进行邮箱验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论