vue打包后获取不到数据_vue 打包后，如何修改接口地址？

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

01背景

在 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 = 'https://www.xxx.com';}

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

02解决方案

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

具体操作步骤：

1. 创建 config.js 文件

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

window.g = {  AXIOS_TIMEOUT: 10000,  ApiUrl: 'http://localhost:21021/api/' // 配置服务器地址,}

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了，而且该方法也不会影响开发模式。

如果喜欢这篇文章，可以支持一下哟，分享、点赞、在看走一个，哈哈@_@

更多文章，请关注公众号【bug收集】

vue打包后获取不到数据_vue 打包后，如何修改接口地址？相关推荐

vue 孙子组件获取祖先组件数据
vue 孙子组件获取祖先组件数据 1.概述在vue项目开发中,如果逻辑比较复杂或者页面的内容较多时,通常会使用组件化开发页面.这个时候一般都是父子组件,两层就够了.使用props和emit方式父子组 ...
vue中使用pdf.js插件打包后不显示插件及打包后动态修改接口地址
最近写了一个项目需要在线展示pdf 实现方法是下载该插件并解压放到 static文件夹中地址:http://mozilla.github.io/pdf.js/ 我在项目中使用iframe嵌套的方式 ...
Lambda表达式 Linq SQL Server 分组后获取第一条数据或最小（最大）数据
1.Lambda表达式以下是从网上粘贴下来经测试失败提示方法"First"只能用作最终查询操作.请考虑在这个实例中使用方法"FirstOrDefault" ...
vue项目打包后修改接口地址
vue项目打包后修改接口地址我们在做vue项目时,总会遇到开发时用的测试地址和项目上线时用到的接口地址不同,再就是项目上线后,后期需要更改接口地址的情况.然而,如果没有一个配置文件,后期更换起来就只 ...
vue打包后修改接口地址(私有化部署)
私有化部署应用场景 1.客户对于软件交付物需要自己部署数据库和站点的情况. 2.一套软件通过修改某文件的方式(较低成本的更改),以达到调换接口的目的. 解决方案在vue项目中public文件夹下新 ...
vue前端如何获取django后端数据
轮播图前端获取数据 script template ajax和axios有什么区别呢? 在我们构建好后端api,也就相当于把让前端获取的数据准备好了.这个时候需要前端使用axios请求向后端api请求 ...
vue子组件获取父组件数据_在vue.js中父组件是如何向子组件传递数据的？
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
vue 不能响应set结构增加数据_Vue.set()动态的新增与修改数据,触发视图更新的方法...
参数: target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据(可以是字符串和数字) value :重新赋的值用法:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的, ...
oracle排序后获取第一条数据
首先想说下,其实很简单的 select * from (select * from testStudent order by id desc) where rownum=1; 看上面的sql语句先执 ...

vue打包后获取不到数据_vue 打包后，如何修改接口地址？

vue打包后获取不到数据_vue 打包后，如何修改接口地址？相关推荐

最新文章

热门文章