webpack+vue打包之后输出配置文件修改接口文件

最新推荐文章于 2023-06-29 14:17:40 发布
最新推荐文章于 2023-06-29 14:17:40 发布
阅读量1.1w 收藏 14
点赞数 2
分类专栏： 技术分享 文章标签： vue   js vue组件 输出配置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaojun_yuan/article/details/79460484
版权
本文介绍了在Vue CLI构建的项目中，如何避免因修改后台接口地址而频繁重新打包的方法。通过创建静态文件config.js存储接口地址，在index.html中引入，并在需要的地方使用，打包后直接修改static目录下的config.js即可，这种方法既方便又不影响开发模式。
摘要由CSDN通过智能技术生成

用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，but，难道我们只是改个接口地址也要重新打包吗？当然不行了，那就太麻烦了，怎么解决呢？其实方法很多，接下来我推荐一种最便捷的方法，也是最容易操作的方法。

1.首先我们在static文件下建立一个js文件，就叫config.js吧，内容为

最低0.47元/天 解锁文章
xiaojun_yuan
关注
专栏目录
如何修改Vue打包后文件的接口地址配置的方法
10-15
主要介绍了如何修改Vue打包后文件的接口地址配置的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
如何修改Vue打包后文件的接口地址配置
lixilai_rjkf的博客
06-07 345
1、背景 常规的vue项目分为本地环境和生产环境，我们只要对config文件夹下的dev.env.js和prod.env.js做相应的配置即可。但是最近在做的项目中，涉及到私有化部署，就是对应的生产环境的地址，不是唯一的。如果每次都修改一个地址，再打包文件进行部署，过程繁琐且低效。那么如何把环境地址设置成可配置的，不需要再构建代码就能直接生效呢？ 2、可选方案 进行了调研后，网上介绍的方案有2种： 1）在static上设置一个config.js，把配置的参数设置成window下的全局...
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
10-16
本文将详细介绍如何使用`webpack`和`vue`构建项目时，生成一个公共配置文件（如`serverConfig.json`），以便在不重新打包的情况下动态修改域名。 ### 需求原因 在实际项目开发中，由于存在开发、测试和生产等多个...
webpack + vue 打包生成公共配置文件
最新发布
09-10
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，可以将多个模块打包成一...通过使用 Webpack 生成公共配置文件，可以更好地组织和管理 Vue 项目的打包配置，提高开发效率，并且方便进行项目的扩展和维护。
webpack+vue-cli项目中引入外部非模块格式js的方法
10-17
为了避免这种情况，我们可能需要在ESLint的配置文件中做相应的规则调整，或者使用ESLint的注释指令来忽略特定的代码块。 以上步骤提供了一种在使用webpack+vue-cli项目时，如何引入外部非模块化JavaScript文件的...
Vue项目打包后修改后台接口地址
admin_rdc
06-29 1303
【代码】Vue项目打包后修改后台接口地址
Vue打包后生成一个可修改接口地址的配置文件
林中明月间丶
10-08 2809
先给几个参考： https://blog.csdn.net/cccdf_jjj/article/details/99593533vue2.0中实现打包后可配置接口地址 https://blog.csdn.net/qq_41409679/article/details/84878642?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth..
vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法
weixin_39793564的博客
12-20 1600
因为项目测试的需要，我需要给测试人员一个项目的测试环境版本和生产环境版本，两个版本的区别就是请求的接口地址不一样而已，一开始，我是在webpack配置了不同的命令，让测试去打包，比如：使用npm run test打包测试版本，使用npmrun build打包生产环境的版本，可是测试嫌麻烦，说让弄成配置文件形式的 ，直接改配置文件就可以改接口地址的那种。想了一阵子没想到方法，同事过来看了看说，，...
vue项目实现动态baseURL,可以在打包后进行配置
Along前端开发者
04-19 3114
目前推出这种方案：要在打包为dist后，依旧可以直接在dist中进行修改。并且生效。
Vue webpack 打包Vue项目后动态配置API接口地址及配置文件
andy5520的博客
01-06 8150
大家一般配置的Vue项目webapi的服务器地址都在config中的prod.dev.js中极不方便，如果要发布多个不同端口及ip的服务器项目，每次都得打包重新修改发布，最近刚好碰到这类问题就查阅资料，结合其他人的心得，自己尝试了一下。 主要有一下几个步骤： 1. 首先在static目录下创建一个config.js文件 里面添加服务器ip及端口地址 window.g是一个全局变量 ...
vue 打包之后生成一个配置文件修改接口域名
YYY1920的博客
12-05 726
第一步：在 static 静态文件中新建一个 config.js 文件，js 代码如下： window.global_config = { BASE_URL: "http://192.168.0.137:90" }; 第二步：在 index.html 中引入 static 文件夹下的 config.js 文件 <script src="./static/config/index.js"&...
webpack输出【output】配置（三）
weixin_30501857的博客
08-21 409
配置output选项可以控制webpack如何向硬盘写入编译文件（可以配置多个入口起点，但只指定一个输出配置） 【output】配置写法（一个入口起点） const config = { output: { filename: 'bundle.js', path: '/home/proj/public/assets' } }; module...
记一次：vue打包后实现修改接口地址
weixin_44843663的博客
08-20 826
因为项目为局域网下，涉及到多地部署，会有多个ip，但是如果每次更改，每次都得帮着打包太麻烦，本人太懒，网上查询资料。找到多种方式。 一：利用 generate-asset-webpack-plugin 插件 使用 generate-asset-webpack-plugin 插件，配置一大堆文件，通过请求获取数据，安全性高，但过程麻烦 二：利用public下的文件不会被打包的原理 在pubic下生成一个json文件，在封装的axios中用原生ajax请求去获取json文件，根据自定义的环境来设置接口地址 js
Vue打包后文件的接口地址配置的方法
weixin_38499606的博客
10-29 7784
背景 常规的vue项目分为本地开发环境和生产环境，在实际项目中，我们在打包之前在.env文件中进行地址配置然后进行打包（vue.config.js文件在开发环境中有效，打包后无效），但在部署过程中地址是不固定的，那么就需要进行动态配置，而不是每次都重新构建代码 第一步：在public中新建config.js文件，用来配置接口地址 在config.js文件中写入 var ipConfig = { baseUrl: 'http://192.168.10.52:9999' } 第二步：在pu.
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值