1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue中请求接口怎么封装公共地址_vue 打包后如何修改接口地址 提供 config.js 进行配置...

vue中请求接口怎么封装公共地址_vue 打包后如何修改接口地址 提供 config.js 进行配置...

时间:2019-09-14 07:30:14

相关推荐

vue中请求接口怎么封装公共地址_vue 打包后如何修改接口地址 提供 config.js 进行配置...

背景

在 vue 项目中,我们可以通过不同的环境,访问不同的服务器. 虽然可以使用环境的切换,**但是在打包成html文件后,想对其进行修改就不行了**。

// 环境的切换

if (process.env.NODE_ENV == 'development') {

axios.defaults.baseURL = 'https://localhost:8888';}

else if (process.env.NODE_ENV == 'debug') {

axios.defaults.baseURL = '';

}

else if (process.env.NODE_ENV == 'production') {

axios.defaults.baseURL = '';

}

需求,给用户提供,可以随时修改接口地址的方法

解决方案

添加一个 config.js ,用户可以通过修改此文件,使用对接口地址的配置

具体操作步骤:

1. 创建 config.js 文件

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

window.g = {

AXIOS_TIMEOUT: 10000,

ApiUrl: 'http://localhost:21021/api/services/app' // 配置服务器地址,

}

2. 引用 config.js 文件

接下来我们只需要在index.html这个入口文件里引入该文件(注意路径就ok)

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

3. 使用 config.js 中的值

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

var baseURLStr = window.g.ApiUrl

// 创建axios实例

const service = axios.create({

baseURL: baseURLStr, // api的base_url

timeout: 5000 // 请求超时时间

})

总结

最后在打包成功之后,config,js文件不会被打包,依然存在public文件夹下,如果需要修改只需要用记事本打开文件修改地址就OK了,而且该方法也不会影响开发模式。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。