Vue自动判断开发环境与生产环境的接口地址并实现切换

最新推荐文章于 2024-04-15 21:27:51 发布
最新推荐文章于 2024-04-15 21:27:51 发布
阅读量2.3k 收藏 5
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT__zz/article/details/108109906
版权

Vue自动判断开发环境与生产环境的接口地址并实现切换

在开发项目时请求数据经常会遇到跨域问题，还好使用vue配置反向代理还是很简单好用的，但是在项目要进行打包上线时会遇到一个问题，反向代理只适用于开发环境下，生产环境是不支持的，也就是说如果不对接口进行处理的话是会报错的，那么我们应该如何解决这个问题呢？

一.config文件夹下dev.env.js中
开发环境下使用了反向代理解决跨域问题

module.exports = merge(prodEnv, {
   
      NODE_ENV: '"development"',
      API_ROOT: '"/api"'	//添加该行代码&#x
最低0.47元/天 解锁文章
IT__zz
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue适配test环境变量从而判断开发，测试和生产环境
allen_csdns的博客
03-11 1500
VUE中通过process.env判断开发，测试和生产环境，并分环境配置不同的URL 通过process.env做判断和处理 1，找到项目配置文件夹： config文件夹 2，进入如下三个文件： dev.env.js 对应开发环境 test.env.js 对应测试环境 prod.env.js 对应生产环境 找到如下代码： // 开发环境 module.exports = merge(prodEnv...
vue配置接口域名方法总结
11-28
Vue.js 是一个流行的前端框架，用于构建用户界面。在开发 Vue 项目时，我们经常会遇到与后端 API 交互的需求。...通过以上方法，可以实现开发环境和生产环境之间的无缝切换，保证 API 请求的正确性。
vue-cli3打包时vue-cli-service build怎么分不同环境（npm run build:stage和npm run build:prod）
weixin_52428855的博客
05-07 5738
突然被问到，这两个命令的区别是什么？？？ 那么就是看下这两个命令的区别，百度一下 vue打包测试环境时，改为调用测试的接口路径。 build:prod对应.env.production build:stage对应.env.staging 接下来就是 看下这连个文件了 ...
cross-env 与 vue-cli-service 的区别
qq_20236937的博客
04-15 1018
是随着 Vue CLI 的发展而出现的。Vue CLI 是一个基于 Vue.js 的全功能脚手架，它提供了大量的插件和工具，帮助开发者快速搭建 Vue.js 项目并进行高效开发。随着 Vue.js 的流行和社区的发展，对于一套统一的、易用的项目创建和管理工具的需求逐渐增加。vue-cli-service test:unit 默认使用的是 test 模式vue-cli-service build。是 Vue.js 的官方命令行工具，主要用于在 Vue CLI 创建的项目中执行各种开发和管理任务。
Vue自动判断开发环境与生产环境的接口地址
尘生杜若
05-08 4860
在开发项目时请求数据经常会遇到跨域问题，还好使用vue配置反向代理还是很简单好用的，但是在项目要进行打包上线时会遇到一个问题，反向代理只适用于开发环境下，生产环境是不支持的，也就是说如果不对接口进行处理的话是会报错的，那么我们应该如何解决这个问题呢？ 一.config文件夹下dev.env.js中 开发环境下使用了反向代理解决跨域问题 module.exports = merge(prodEnv,...
【vue】判断是开发环境还是生产环境
wujiezhiwei的博客
03-28 579
export const stateNODE_ENV = process.env.NODE_ENV.trim().toLowerCase(); production/product
Vue项目如何区分开发还是生产环境切分不同环境接口
qq_42577176的博客
01-05 2806
1.在c 1.为什么要配置不同的接口地址 目前，由于我在开发过程中，前端请求访问的是我本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以就在config/index.js文件中配置了代理，如下： 意思就是说凡是以api开头的请求，会帮我转到8089端口去获取数据。所以前端的请求都统一写成'api'+'接口名' 但是在生产环境下，我们不需要在接口前面加api发送请求，所以我们需要判断开...
vue开发和生产环境axios接口切换
qq_31404277的博客
10-07 583
主要方法是在你创建vue.config.js之后，在本地跨域是没有问题的，此时打包上线之后，接口会出现一个问题，就是多了跨域的一个字段。此时 需要创建一个文件，类似于api.config.js的文件。 文件中写上： var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于区分是生产环境还是开发环境 //根据...
vue中Npm run build 根据环境传递参数方法来打包不同域名
08-27
通过以上四个步骤，我们可以实现Vue项目在不同环境中自动切换API域名。这种方法不仅简化了配置流程，也提高了代码的可维护性和复用性。在实际开发过程中，可以根据项目的具体需求进行相应的调整和扩展。 总结一下，...
vue-admin:使用vue搭建后台管理系统框架
05-01
Vue-i18n是一个用于Vue应用的国际化插件，可以帮助我们轻松实现不同语言环境下的文本切换。 7. **接口文档**：使用Swagger或类似的工具，为后端API生成清晰的文档，方便前端开发者理解和调用。 8. **单元测试**：...
基于Springboot+Vue精品在线试题库系统源码案例设计带文档说明.zip
最新发布
04-21
本篇文章将深入探讨一个利用Springboot后端框架和Vue前端框架构建的精品在线试题库系统的设计与实现，旨在帮助开发者理解此类系统的构建流程，并提供源码参考。 一、Springboot框架介绍 Springboot是由Pivotal团队...
基于web的在线考试系统的设计与实现，一整套，工程，数据库文件，word，ppt，直接运行
04-20
在线考试系统是一种基于...通过以上知识点，我们可以看出这个在线考试系统是一个综合性的项目，涵盖了软件工程的多个阶段，从需求分析到设计、实现、测试，再到部署和维护，为用户提供了一个便捷、安全的在线考试环境。
vue 根据生产环境还是开发环境自动变更baseUrl
高先生的猫
02-25 799
const devBaseUrl = 'https://www.baidu.com/'; const proBaseUrl = 'https://www.qq.com'; let url; process.env.NODE_ENV === 'development' ? url = devBaseUrl : url = proBaseUrl ; axios.defaults.baseURL = url; 上面的开发环境和生产环境的地址只是随便放的，你可以根据自己的实际进行修改 ...
vue-cli项目生产环境和开发环境请求接口配置，不用手动切换，自动切换地址的问题
一键写代码的博客
08-23 3766
1、在dev.env.js文件中添加配置(开发环境)： 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', url_api: '"api"'...
vue配置开发环境，测试环境，生产环境
Lc_style的博客
04-18 6441
开发环境：一般是本地开发时所使用的环境，改动很频繁 测试环境：较为稳定的版本，一般用于部署测试 生产环境：发布到线上的版本 配置不同环境变量可避免切换不同环境时手动修改项目配置，请求url等，vue项目中可先在package.json文件中这样设置： "scripts": { "dev": "vue-cli-service serve --mode development", //开发环境 "dev:test": "vue-cli-service serve --mode t.
【vue】-------生产环境与开发环境的切换
weixin_30474613的博客
08-07 1517
Vue.config.productionTip = false //阻止了生产模式，此时是以开发模式运行，可以更改为true查看变化 转载于:https://www.cnblogs.com/yuanjili666/p/11313369.html
vue 设置项目全局配置文件，可灵活切换 本地/开发/测试/投产环境
u010468580的专栏
09-23 1579
vue-cli-plugin-app-config 介绍 一个vue项目配置文件管理的解决方案，可方便开发者在本地环境/测试环境/投产环境等多种配置里面快速切换 快速使用 添加插件 yarn add vue-cli-plugin-app-config // 或者 npm i vue-cli-plugin-app-config --save-dev 应用插件到项目中 vu...
vue根据不同的环境使用不同的接口地址
web前端学习总结
06-30 1440
vue根据不同的环境使用不同的接口地址 1. 在根目录下新建一个js文件夹。 目录结构如下： 2. 新建setBaseUrl.js文件 在js文件夹下添加setBaseUrl.js文件，内容如下： let baseUrl = ""; let allUrls = {}; let nodeEnv = process.env.NODE_ENV; switch (nodeEnv) { case 'development': baseUrl = 'http://192.168.161.186:8080/
【vue】配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境
热门推荐
qq_26780317的博客
08-25 1万+
背景：在前后端分离开发的项目中，一般会有开发环境、测试环境、预上线环境和生产环境。 1.在开发环境下调试接口的时候，一般都会有好几个接口地址，需要根据情况手动来切换接口地址； 2.打包时要部署项目到不同的环境，而这也需要每次都根据情况切换接口地址。 虽然，手动切换地址可以满足需求，但是这种方式不是一种较为便捷的处理方式。我们可以选择一种较为方便的方式来解决这个问题。 ...
Vue 开发环境初始配置.docx
09-07
Vue 开发环境初始配置

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值