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

最新推荐文章于 2023-07-03 15:25:14 发布
原创 最新推荐文章于 2023-07-03 15:25:14 发布 · 511 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #web应用

本文介绍在Web项目中如何通过在public目录下创建配置文件并引入到index.html，实现打包时不压缩资源，便于部署时按需修改配置。具体步骤包括在config.js中添加配置项，以及在项目中调用使用。

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

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

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

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

将Vue项目打包并生成链接
BitSlinger的博客
09-19 519
在开发完成后，我们通常希望将Vue项目打包成一个独立的文件，并生成一个可以通过链接访问的应用程序。至此，你已经成功将Vue项目打包并生成了一个可以通过链接访问的应用程序。如果你想在部署到生产环境之前进行其他配置（例如添加域名、HTTPS支持等），请参考所使用的Web服务器的文档进行相应的配置。现在我们已经成功打包了Vue项目，接下来需要将其部署到一个Web服务器上，并生成一个可以访问的链接。现在我们已经成功打包了Vue项目，接下来需要将其部署到一个Web服务器上，并生成一个可以访问的链接。
Vue实战指南：Vue打包优化，Webpack的八大配置方案
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-15 2298
此时，合理的配置不仅能够提高开发效率，还能在不影响用户体验的前提下进行频繁的更新。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过为输出文件添加哈希值，使得浏览器能够缓存这些文件，在没有变化的情况下，用户再次访问时可以直接从缓存加载。通过懒加载模块，即在需要时才加载代码，而不是一开始就加载所有代码，可以有效减少初始加载时间。在生产环境下，应该启用Webpack的各种优化特性，以确保输出的代码是经过充分压缩和优化的。，为我们广大开发同胞谋福祉，
Vue2打包后文件的接口地址动态配置
qq_32555123的博客
07-26 1687
修改Vue打包后文件的接口地址配置
如何修改Vue打包后文件的接口地址配置
weixin_43123984的博客
02-10 2375
如何修改Vue打包后文件的接口地址配置 步骤一 在public文件下新建一个config.js配置全局变量 步骤二 在public文件下的index.html中引入config.js 步骤三 在api中使用全局变量baseURl 步骤四 在vue.config.js中配置打包后路径 以上配置结束后，npm run build生成的dist文件中的config.js便可外部动态修改baseUrl了 ...
vue打包项目上传到github上，以页面的形式打开，然后生成一个链接（可面试的时候把自己的项目链接填写在页面上）。超级详细教程。
我是小刘丶
10-13 2143
vue打包项目上传到github上，以页面的形式打开，然后生成一个链接（可面试的时候把自己的项目链接填写在页面上）。超级详细教程。
vue项目 服务器端变量,vue接通后端api以及部署到服务器操作
weixin_42469243的博客
08-10 772
1.打开项目工程，找到config文件夹下index.js,进行以下修改dev: {// PathsassetsSubDirectory: "static",assetsPublicPath: "/",proxyTable: {"/api":{target: "http://www.baidu.com",//后端api地址changeOrigin: true,pathRewrite:{"^api"...
精选资源
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以及如何构建这样的心率监测应用。 首先，让...
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
10-16
在开发Web应用时，我们经常需要对不同的环境（如开发环境、测试环境、生产环境）配置不同的API域名。本文将详细介绍如何使用`webpack`和`vue`构建项目时，生成一个公共配置文件（如`serverConfig.json`），以便在不...
(源码)基于FastAPI和Vue的Web应用练习.zip
最新发布
04-09
# 基于FastAPI和Vue的Web应用练习 ## 项目简介 本项目是一个基于FastAPI和Vue的Web应用练习项目，旨在通过实际开发案例，帮助开发者掌握FastAPI和Vue.js的基本使用，并理解如何将前后端技术结合，构建一个完整的...
vue项目中运用webpack动态配置打包多种环境域名的方法
10-16
动态环境配置可以在不修改代码的前提下，通过改变环境变量的值来调整运行时配置，从而满足不同环境的需求。 文章中首先介绍了一个非常重要的工具 —— `cross-env`。这是一个帮助我们在跨平台（Windows和Unix系统）...
vue配置打包后动态修改api请求地址
qq_37150922的博客
12-05 1818
1：在public下面新建一个文件夹，放请求地址的配置文件 2：ipconfig.js： 3：在index.html文件中引入该配置文件 4： axios请求的baseUrl
VUE：axios配置及接口请求路径api配置
热门推荐
干饭搬砖两不误。
09-01 1万+
关于vue中使用axios请求的配置,注意其中区分Vue2.0和Vue3.0的写法。
vue打包之后，可以进行修改配置后端地址、端口等信息方法
用心,承载未来
04-12 6769
用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是，难道我们只是改个接口地址也要重新打包吗？当然不行了，那就太麻烦了，怎么解决呢？本文推荐俩种方式。
vue静态资源打包
一只前端小菜鸟
09-02 3775
vue项目打包后，可能大家会注意到，会把一些文件都编译压缩到一起，但是打包后我们通常很难再去修改某些东西。 场景一：单点登录。当我们需要把部署包部署到不同的环境，但是有些环境往往不需要登陆的操作，那常规操作的情况下，我们就需要不开启登录的打包一份，然后开启登录后再打包一份 场景二：logo / 标题。当我们需要把部署包部署到不同的现场，每个地方可能对于的标题不一样，那我们不可能根据每个现场的标题去打包一份部署包。 类似的应用场景还有很多。 所以，vue官网为我们提供了一份应急手段，public文件夹(v
Web前端之Vue动态配置启动或打包时的参数、读写文件、设置、writeFileSync、readFileSync、toString、replace、process、join
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
04-17 2439
Web前端之Vue动态配置启动或打包时的参数、读写文件、设置、writeFileSync、readFileSync、toString、replace、process、join
如何将vue项目打包成.exe文件，不想踩坑就来这里！
weixin_61877032的博客
07-03 1万+
如何将vue项目打包成.exe文件；electron打包后的.exe文件请求域名为何为file:///；electron打包后的文件路由无法跳转；
vue根据环境动态打包BASE_API
kirinlau的专栏
02-17 4216
项目需要在不同环境下运行，如开发，测试，生产等，但是每个环境下请求的服务地址不是确定的， 为了避免频繁切换请求的地址以及相关的配置容易出错的问题，新的vue-cli脚手架没有直接提供配置选项，怎么办呢？属性了，因为它变成了一个全局的变量，可以在任何地方使用，它会根据环境自动去赋值baseURL了。分别为.env.development，.env.test，.env.production。就像下面这种，就是.env文件只需要声明环境，不需要配置。首先我们在根目录新建3个文件，一、建立.env系列文件。
vue 项目中如何动态配合API请求地址
lk_csdn666的博客
02-09 3014
vue 项目中如何动态配合API请求地址
vue 多环境打包并支持动态修改
qq_43536071的博客
11-14 3007
因为：通过以上方式，config.js是存在vue中的main.js文件的引用链中的，这样webpack会处理成一个js文件，所以修改外面的config.js文件不会影响打包后的js。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YZafg6Su-1668414134084)(C:\Users\w\Desktop\1.png)]可以看出config里的配置是被打包到app.xxx.map，这样你修改外层config.js 肯定是失效的。需要config.js 脱离。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值