vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...

1、背景

常规的vue项目分为本地环境和生产环境，我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可。但是最近在做的项目中，涉及到私有化部署，就是对应的生产环境的地址，不是唯一的。如果每次都修改一个地址，再打包文件进行部署，过程繁琐且低效。那么如何把环境地址设置成可配置的，不需要再构建代码就能直接生效呢？

2、可选方案

进行了调研后，网上介绍的方案有2种：

1)在static上设置一个config.js，把配置的参数设置成 window 下的全局变量。这种方案的确可行，但是，但是，不安全！！！如果请求地址被恶意修改，后果不太好~

2)使用 generate-asset-webpack-plugin 插件，配置一大坨后生成一个静态文件，然后通过请求的方式，获取需要的数据，这种方法可以解决安全性问题，但是，但是，有点小麻烦啊~

因此，博主根据实际项目，将两种方法结合在一起，形成了一个中和的方案。

3、执行方案

配置步骤

第一步：在 static 文件夹中新建一个 config.json，把你要写的配置写入

{// 基本访问地址"BASE_URL":"http://webhmy.com"}

放在static下的文件，可以被直接访问。

第二步：在 main.js 中请求定义的配置文件，并放到 Vue.prototype 中，使全局可访问，注意，这里把new Vue()放在请求里执行，是防止请求与页面渲染之间的时间差异化导致值获取不到，因此这样比较保险。

// 定义外部接口可配置importaxiosfrom'axios'letstartApp =function(){ axios.get('/static/config.json').then((res) =>{// 基础地址Vue.prototype.BASE_URL = res.BASE_URL;newVue({el:'#app', router, store,components: { App },template:''}) })}startApp()

第三步：如果在 .vue 文件中使用：

console.log(this.BASE_URL)// http://webhmy.com

如果在一些 .js 文件中，可以调用Vue后再使用：

importVuefrom'vue'console.log(Vue.prototype.BASE_URL)// http://webhmy.com

打包修改

执行 npm run build 可以看到打包文件夹 static 文件夹下的 config.json，之后可以修改配置，刷新页面即可。

【补充】

因为请求和打包操作的时差性，哪怕它是请求本地的文件，但是有时发现它的请求会比我们系统的第一个请求慢了，这个时候就会失效。

解决方法：相信我们的项目中都对请求进行了一些封装操作，只要将对应的baseURL的值改成实时获取Vue.prototype.BASE_URL的值，就可以保证接口请求能够准确获取到了~

vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...相关推荐

如何修改Vue打包后文件的接口地址配置
1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
在vue中怎么写行内样式高_说说在 Vue.js 中如何绑定样式（class 或 style）
在数据绑定中,最常见就是动态绑定元素的 class 或内联样式 style 咯,它们也是 HTML 的属性,所以可以使用 v-bind 指令 . 1 绑定 class 1.1 对象语法使用 v-bi ...
Vue项目—请求函数的封装
Vue项目-请求函数的封装 import axios from 'axios'export const post = (url, data = {}) => {return new Promis ...
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
vue中rules校验是验证首字符_小白也能秒懂Vue源码中那些精细设计（选项处理）...
我"崩"不住了,在彭凡同志锲而不舍的催促下这篇文章终于"蛋"生了. 说正经的这篇文章不好写,不好写的原因是我不太擅长写这些类比文,但它还是写出来了. 相信大部分 ...
快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...
配置vue打包后可以更改接口地址
有时候我们会遇到这种情况,项目开发完打包后,安排其他同事需要去客户现场集成,我们在去之前也不知道客户的服务器地址,这时候就可以把接口地址配置成打包后也可以更改,这样会方便许多,下面是具体流程: 1. ...
【详解Vue中请求拦截器】
文章目录前言一.安装依赖二.定义拦截器 1.创建一个interceptors.js文件用于定义拦截器 2.注册插件 3.发送请总结前言提示: Vue请求拦截器通常用于在发送请求之前对请求进 ...
vue项目接口地址暴露_vue组件暴露和.js文件暴露接口操作
1.将同一类型的组件放在一个文件夹下 2.在此文件夹下创建一个index.js 3.在index.js中导入组件,并把他们暴露出去 1.写法一 import studentCourse1 from ' ...

vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...

vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...相关推荐

最新文章

热门文章