vue项目开发环境下连接多个后台

最新推荐文章于 2024-03-14 15:08:00 发布
最新推荐文章于 2024-03-14 15:08:00 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： vue 文章标签： vue 接口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq379682421/article/details/115408272
版权

问题：开发中遇到多个后台需要连接前端进行开发的情况

if(process.env.NODE_ENV == 'development' ){
    // 后台人员可以在控制台用 localStorage.setItem('adminUrl', '后台接口地址'); 来设置链接后台的地址
    setUrl = localStorage.getItem('adminUrl') || 'http://api.hehe.com/';
    
}

使用localStorage进行缓存后台接口地址，前端获取缓存的接口地址进行请求

寒 枫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
非常好的一个VUE项目资源，分享出来.zip
02-26
vue 非常感谢大家喜欢这个项目，但是由于工作太忙实在是没时间维护这个项目，所以耽搁了一大段时间，给大家带来的麻烦我非常抱歉。 接下来我会抽时间维护这个项目，有什么问题可以随时找我，或者提issue，我看到就会直接回。 并且我在开发一系列新的开源项目，目的是帮助大家提升生产力，解放双手。 Features 特性 wz脚手架（脚手架助你安装/卸载组件更方便） 工业化UI组件（上手即用，无需自己造轮子） 自适应布局（完美适配大中小屏） 登录/注销 权限验证 多TAB导航（没有多TAB怎么能称为后台管理界面呢？） Markdown 编辑器 动态侧边栏（支持多级路由） 面包屑导航 JSON展示组件 echartjs图表 404错误页面 表格数据直接导出cvs 多环境发布 mock数据 炫酷hover特效
vue 一个前台配置请求多个服务端（后端）解决方案
weixin_42499566的博客
11-29 6424
vue 一个前台配置请求多个服务端（后端）解决方案
Vue2和vue3如何配置多个代理服务器 亲测有效开箱即用 附带原理教学
2303_77072102的博客
09-15 2149
在开发过程中，由于使用第三方框架只配置一个代理服务器和后端联调满足不了我们的需求,我们通常会在 vue.config.js或者是vite.config.js 中配置 devServer 来在本地启动一个服务器，在这个选项中，我们会配置proxy 属性来将指向到本地的请求（例如： /api/action） 代理到后端的开发服务器上避免跨域。
vue配置多个后端
weixin_44239362的博客
03-14 299
1、src/utils/request.js 设置baseURL为空。2、vue.config.js 配置proxy。
JavaScript--location.href的跳转
weixin_30800987的博客
12-24 201
页面重载 true 强制从服务器加载 false 优先从缓存加载 window.location.reload(true); window.location.href、self.location.href、location.href是本页面跳转 parent.location.href 是上一层页面跳转 top.location.href 是最外层的页面跳转 ...
打通前后端构建一个Vue+Express的开发环境
12-07
前端做多了，自然就会想往后端伸手。更何况现在有了Node和Express，让前端做后端开发的学习降低了不少。 最近正好揽下了一个 Vue + Express + mysql 的小项目。项目开始时是前后端分开开发的，但是当后台做好一部分要进行连接测试时问题就来了。前端部分在每次修改过就需要build一次，而后台也每次需要重启一次服务器才能进行调试。可想而知，这样的开发和调试效率是很低的。在这么煎熬着做了一个功能之后，实在受不了。于是便想有没有什么方法可以热更新开发前后端。毕竟 vue-cli 在调试时，后台就是用 express 做的服务器。 在网上搜索了一下，发现果然有前辈们已经想到这个问题，
VUE项目中调用如何两个接口
qq_28141257的博客
04-26 4659
在项目根目录下新建config.js文件 vue.config.js 配置 module.exports = { devServer: { port: 8080, proxy: { // 要走第二個服務器的URL 的寫法 : /api + 远程机器的path // 第一台服务器配置 '/api': { //目标路径 tar
React、Vue项目中如何调用多个不同的后台请求地址
梦想成为全栈的切图仔
10-19 3827
在项目每次发起请求的时候，根据当前业务传入不同的参数，分别获取不同的请求接口即可。线上一个服务器，那如果说这是在内网环境下部署呢，就比如医院项目中，有三个服务器，一个资源上传，一个普通接口（包含认证），一个表单数据记录。上述代码中axios，是我二次封装的axios，axios的部分代码如下，它接收传递进来的url 做为项目的请求地址。首先，我们先来拆解它的需求，也就是说我们一个网页项目需要同时使用三个不同地址的需求。
vite+vue3构建前端和多个后端服务器联调
weixin_43134304的博客
06-15 1227
vue3 构建前端与多个后端及测试服务器联调
前端配置多个后台地址： baseUrl
wytraining
07-15 4575
1.vue.config.js 中配置不同的前缀，以及所对应的后台地址 devServer: { proxy: { "/api": { target: "http://172.xx.x.xxx:xxxx", // 地址1 //表示/api替换成该地址 changeOrigin: true, pathRewrite: { "^/api": "", //重写api为空
基于gin+vue搭建的后台管理系统框架-Golang开发
05-26
基于gin+vue搭建的后台管理系统框架，集成jwt鉴权，权限管理，动态路由，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器，通用工作流等基础功能，五分钟一套CURD前后端代码，目前已支持VUE3 English | 简体中文 gitee地址:https://gitee.com/pixelmax/gin-vue-admin github地址:https://github.com/flipped-aurora/gin-vue-admin vue3版本分支地址:https://github.com/flipped-aurora/gin-vue-admin/tree/vue3Develop 项目文档 在线文档 : https://www.gin-vue-admin.com/ 从环境到部署教学视频 开发教学 (贡献者: LLemonGreen And Fann) 前端UI框架：element-ui 后台框架：gin 1. 基本介绍 1.1 项目介绍 在线预览 测试用户名：admin 测试密码：123456 Gin-vue-admin是一个基于vue和
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
最新发布
04-10
vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决方案，可免费商用，同时支持PC、平板、手机 ## 项目功能 - 使用Vue3.0开发，单...
vs-ui:基于vue项目开发的UI组件库
03-10
基于Vue开发的UI组件 使用npm + webpack + babel的工作流，支持ES2015 提供友好的API，可灵活的使用组件 浏览器支持 现代浏览器和IE9及以上 安装 纱 yarn add vvui npm npm install vvui --save 使用 import VvUI ...
vue中keepAlive页面缓存，详情页返回列表页刷新问题
星辰的笔记
04-26 6599
问题 当我们从列表页面的第二页进入某一项的详情页后 再从详情页返回列表页，此时列表页会刷新回第一页 用户体验极差 需要的效果 返回时仍要回到之前保存的好的页数和筛选条件等 解决 需要缓存的页面则添加keepAlive，不需要缓存的页面则不加 路由 <!-- 缓存的页面 --> <keep-alive> <router-view v-...
vue数据改变影响其他数据的问题
星辰的笔记
03-11 1229
1，改变一个下拉框，其他几个下拉框的数据会跟着改变（这些下拉框都是使用的同一个数组不同对象的数据，非相同数据） 后面发现只有push添加的数据才会出现此问题 写死的数据下拉操作是正常的，不会影响其他对象的数据 解决： 生成一个新的对象或数组，就可以解决此问题 JSON.parse(JSON.stringify(“对象 || 数组”)) 猜测是vue底层数据绑定的问题 ...
vue/cli3 项目大小优化
星辰的笔记
11-21 1022
vue路由懒加载 按需加载一定要规范好css！！！ vue/cli3官网示例 把组件按组分块 把 import school from '@/views/school.vue' 换成 const school= () => import('@/views/school.vue') 这样就会每一个组件就会对应生成一个js文件，按需加载 此外，还需要在vue.config.js中配置 //...
vue、element-ui学习笔记1
星辰的笔记
09-05 279
问题 1，动态改变src的字符串时出现路径错误的问题，原因是webpack不解析 <img :src="'static/nav_left'+index+ 1 +'.png'" alt />
vue开发多语言后台管理系统
12-05
为了开发一个多语言的Vue后台管理系统，我们可以采用以下步骤： 1. 首先，我们需要在Vue项目中安装vue-i18n插件，该插件提供了多语言支持。可以使用以下命令进行安装： ```shell npm install vue-i18n --save ``` 2. 在Vue项目中创建一个i18n.js文件，该文件将包含我们的多语言配置。在该文件中，我们需要导入vue-i18n插件并创建一个VueI18n实例。我们还需要定义我们的语言环境和翻译消息。以下是一个简单的i18n.js文件示例： ```javascript import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const messages = { en: { message: { hello: 'Hello, world!' } }, fr: { message: { hello: 'Bonjour le monde!' } } } const i18n = new VueI18n({ locale: 'en', // 设置默认语言 messages // 设置翻译消息 }) export default i18n ``` 3. 在Vue组件中使用翻译消息。我们可以使用VueI18n实例的$t方法来获取翻译消息。以下是一个简单的Vue组件示例： ```vue <template> <div> <p>{{ $t('message.hello') }}</p> </div> </template> <script> import i18n from './i18n' export default { name: 'HelloWorld', i18n // 将i18n实例注入到组件中 } </script> ``` 4. 在i18n.js文件中添加更多的语言环境和翻译消息。例如，我们可以添加一个中文语言环境： ```javascript const messages = { en: { message: { hello: 'Hello, world!' } }, fr: { message: { hello: 'Bonjour le monde!' } }, zh: { message: { hello: '你好，世界！' } } } ``` 5. 在Vue组件中切换语言环境。我们可以使用VueI18n实例的$locale方法来切换语言环境。以下是一个简单的Vue组件示例： ```vue <template> <div> <p>{{ $t('message.hello') }}</p> <button @click="switchLocale('fr')">Français</button> <button @click="switchLocale('zh')">中文</button> </div> </template> <script> import i18n from './i18n' export default { name: 'HelloWorld', i18n, methods: { switchLocale(locale) { this.$i18n.locale = locale } } } </script> ``` 以上是一个简单的多语言Vue后台管理系统的开发过程。我们可以根据实际需求进行更多的定制和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值