配置vue打包后可以更改接口地址

有时候我们会遇到这种情况，项目开发完打包后，安排其他同事需要去客户现场集成，我们在去之前也不知道客户的服务器地址，这时候就可以把接口地址配置成打包后也可以更改，这样会方便许多，下面是具体流程：

1. 创建config.js
我的vue-cli是3.X版本，所以没有static文件夹，只有public文件夹，而这个文件夹打包不会被编译，我们就在这个文件夹下创建自己的配置文件config.js

window.g = {BASE_URL: "http://127.0.0.1:8080/phm"
}

2. 引用config.js
在public文件夹下的index.html引用该配置文件

<script type="text/javascript" src="config.js"></script>

3. 使用config.js
可以在封装 axios 的代码中，设置 baseUrl 时，直接使用 config.js 中配置的值。代码如下：

var baseURLStr = window.g.BASE_URL; // 设置可配置接口地址
const instance = axios.create({timeout: 600 * 1000, //请求超时时间baseURL: baseURLStr,
});

总结：

这样配置后打包后的文件结构如下图所示：
我们想修改服务器地址的时候，只需用记事本修改config.js里面的值就行，这样也不会影响开发模式。
注：vue项目中配置的proxy只是对于开发环境中将的localhost请求代理到www.xxx.com，当项目发布到生产环境则是走nginx代理服务器，项目中的proxy配置无效。

配置vue打包后可以更改接口地址相关推荐

如何修改Vue打包后文件的接口地址配置
1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...
1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
vue中使用pdf.js插件打包后不显示插件及打包后动态修改接口地址
最近写了一个项目需要在线展示pdf 实现方法是下载该插件并解压放到 static文件夹中地址:http://mozilla.github.io/pdf.js/ 我在项目中使用iframe嵌套的方式 ...
nginx配置 vue打包后的项目解决刷新页面404问题|nginx配置多端访问
访问vue页面时,/# 使url看着不美观,使用 H5 history模式可以完美解决这个问题,但需要后端nginx帮助.接下来我们自己配置一下. 使用前端路由,但切换新路由时,想要滚动到页面顶部,或 ...
实现打包后修改服务器接口地址,vue打包之后生成一个配置文件修改接口
我们的vue代码打包上传到服务器之后,生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名,只修改这个配置文件即可. 第一步:安装generate-asset-webpack-pl ...
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
vue 打包后访问接口报错404 解决方案（前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...
vue打包后更改js文件名称
好好学习 ,天天向上.Are you ready? vue默认打包dist文件(js文件默认名称) vue打包后更改js文件名称例如: 中间部分加时间戳代码奉上修改vue.config.js c ...
vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...

配置vue打包后可以更改接口地址

总结：

配置vue打包后可以更改接口地址相关推荐

最新文章

热门文章