vue 打包web应用时 API 链接动态配置

最新推荐文章于 2024-07-18 17:00:46 发布
最新推荐文章于 2024-07-18 17:00:46 发布
阅读量436 收藏 1
点赞数
分类专栏： vue 文章标签： vue web应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanglu111/article/details/103976626
版权

web项目打包时，一般不会压缩public 中的资源，所以创建配置文件在public中，并在index.html中引入

在congfig.js 中添加需要配置的项。

在需要使用的位置直接调用使用

打包完成，部署时，按需修改web应用根路径下的config.js 文件

qianxunzhilu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
10-16
在开发Web应用时，我们经常需要对不同的环境（如开发环境、测试环境、生产环境）配置不同的API域名。本文将详细介绍如何使用`webpack`和`vue`构建项目时，生成一个公共配置文件（如`serverConfig.json`），以便在不...
vue 修改动态api地址（打包后实现动态修改api服务地址）
Missxu1895的博客
08-17 5194
目前来说，前端和后端是分开的，然后运维那边想要换服务器，如果总换服务器，那api地址也是总换，就要不停的打包部署，现在就是想要实现打一次包就可以在打包的dist文件夹里动态修改api地址，在网上查到有两种方法都可以实现这种直接在dist文件里面进行修改，无需反复打包 第一种： 在public增加config.js文件 window.ipConfigUrl = { baseURL:"http://192.168.0.76:31900" } 在public下的index.html引入config
vue3项目打包上线后,如何配置api接口地址,省去更换api再次打包
Gik99的博客
03-06 1166
ue3项目打包上线后,如何配置api接口地址,省去更换api再次打包
vue配置打包后动态修改api请求地址
qq_37150922的博客
12-05 1370
1：在public下面新建一个文件夹，放请求地址的配置文件 2：ipconfig.js： 3：在index.html文件中引入该配置文件 4： axios请求的baseUrl
vue打包之后，可以进行修改配置后端地址、端口等信息方法
用心,承载未来
04-12 5457
用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是，难道我们只是改个接口地址也要重新打包吗？当然不行了，那就太麻烦了，怎么解决呢？本文推荐俩种方式。
VUE：axios配置及接口请求路径api配置
热门推荐
干饭搬砖两不误。
09-01 1万+
关于vue中使用axios请求的配置,注意其中区分Vue2.0和Vue3.0的写法。
Vue2打包后文件的接口地址动态配置
qq_32555123的博客
07-26 1391
修改Vue打包后文件的接口地址配置
如何修改Vue打包后文件的接口地址配置
weixin_43123984的博客
02-10 2230
如何修改Vue打包后文件的接口地址配置 步骤一 在public文件下新建一个config.js配置全局变量 步骤二 在public文件下的index.html中引入config.js 步骤三 在api中使用全局变量baseURl 步骤四 在vue.config.js中配置打包后路径 以上配置结束后，npm run build生成的dist文件中的config.js便可外部动态修改baseUrl了 ...
vue-web-bluetooth-api-heart-rate-app:带有Vue.js的Web蓝牙API心率应用
05-09
这个名为“vue-web-bluetooth-api-heart-rate-app”的项目是基于Vue.js构建的一个应用，它利用了Web蓝牙API来实时获取和显示心率数据。下面将详细讨论Vue.js、Web蓝牙API以及如何构建这样的心率监测应用。 首先，让...
Vue.js学习Item–构建大型web应用
02-24
Vue.js生态系统提供了一系列的工具与库，用于构建大型单页应用。这些部分会感觉开始更像一个『框架』，但是它们本质上只是一套推荐的技术栈而已-你依然可以对各个部分进行选择和替换。对于大型项目，为了更好地管理...
DataV Vue一款数据可视化应用搭建工具
05-30
标题 "DataV Vue" 指的是一款专用于数据可视化的应用搭建工具，它构建于一系列先进的前端技术栈之上，包括 Vue 3.0、Vite 3.0、Pinia 2.0 和 TypeScript 4.0。这些技术的组合使得 DataV Vue 成为一个强大且现代的...
Vue中跨域及打包部署到nginx跨域设置方法
10-16
主要介绍了Vue中跨域以及打包部署到nginx跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue静态资源打包
一只前端小菜鸟
09-02 3541
vue项目打包后，可能大家会注意到，会把一些文件都编译压缩到一起，但是打包后我们通常很难再去修改某些东西。 场景一：单点登录。当我们需要把部署包部署到不同的环境，但是有些环境往往不需要登陆的操作，那常规操作的情况下，我们就需要不开启登录的打包一份，然后开启登录后再打包一份 场景二：logo / 标题。当我们需要把部署包部署到不同的现场，每个地方可能对于的标题不一样，那我们不可能根据每个现场的标题去打包一份部署包。 类似的应用场景还有很多。 所以，vue官网为我们提供了一份应急手段，public文件夹(v
Vue项目配置WebSocket连接{ws、wss 连接方式}配置
HD243608836的博客
01-12 6668
这里target: 里边指向的都是后端server的地址 16000是我后端服务的端口 , 我这里websocket服务和普通的业务项目用的都是一个项目 所以都是16000端口。因为在本次测试的时候使用的是普通的ws方式连接 所以为了方便切换就写了两个websocket代理路由。env.development 文件和 .env.production 文件都加上这两行代码即可。前端websocket向后端发送数据使用方式。为什么要配置两个地址呢?
封装WebSocket 组件 (vue2)
Guanchong333的博客
07-18 223
在你的主组件或者需要使用 WebSocket 的地方引入并使用这个 WebSocket 组件。文件中包含 WebSocket URL。确保用户模块正确导出。
vue 项目中如何动态配合API请求地址
lk_csdn666的博客
02-09 2556
vue 项目中如何动态配合API请求地址
vue项目 服务器端变量,vue接通后端api以及部署到服务器操作
weixin_42469243的博客
08-10 680
1.打开项目工程，找到config文件夹下index.js,进行以下修改dev: {// PathsassetsSubDirectory: "static",assetsPublicPath: "/",proxyTable: {"/api":{target: "http://www.baidu.com",//后端api地址changeOrigin: true,pathRewrite:{"^api"...
vue配置开发，测试，生产环境api
weixin_34245749的博客
10-12 580
前言： 想实现通过不同的命令，打包调用不同环境的API，实现实现前端自动化部署。 前端自动化部署工程比较复杂，这里只介绍通过不同的命令，打包的时候调用不同环境的API，例如：npm run build 调用开发环境接口，打包开发环境npm run build:test 调用测试环境接口，打包测试环境npm run build:pr...
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
flask+vue实现web应用
04-23
3.在Flask应用中配置api路由，用于前端页面访问后端接口。 4.将Vue打包生成静态资源文件，并将其放置到Flask应用中对应的static文件夹下。 5.修改Flask应用中html标签中的src属性，将路径设置为静态资源文件路径。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值