vue项目接口域名动态获取操作


Posted in Javascript onAugust 13, 2020

需求:

接口域名是从外部 .json 文件里获取的。

思路:

在开始加载项目前 进行接口域名获取,然后重置 接口域名的配置项。

实现:

1、config/index.js 文件 进行基础配置

import axios from 'axios'

const config = {
 requestUrl: 'http://qiniu.eightyin.cn/path.json', //动态域名所在地址
 baseUrl: {
  dev: '/api/',
  pro: 'http://xxx.com/' // 接口域名,会被动态覆盖
 },

 requestRemoteIp: () => { // 动态获取
  return new Promise((resolve, reject) => {
   axios.get(config.requestUrl).then(response =>
   {
  
    config.baseUrl.pro = response.data.data.path;
    config.img.domain = config.baseUrl.pro;
    resolve()
   }, err => {
    reject()
   });
  });
 }
}

export default config

2、项目下main.js 文件 进行动态获取

import config from '@/config/index.js'

// 读取接口域名
config.requestRemoteIp().finally(res => {
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
 
  router,
  components: { App },
  template: '<App/>'
 })
});

3、请求数据

const instance = axios.create({
   baseURL: process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
  })

补充知识:webpack + vue 打包生成公共配置文件(域名) 方便动态修改

需求原因

原来的项目中域名是打包到项目里面的,打包后不能动态配置,只能通过不同的指令打包来切换域名,每天都在测试域名和正式域名来回摩擦,后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好,于是就有了这篇文章。

第一步 安装插件

npm install --save-dev generate-asset-webpack-plugin

第二步 新建配置文件

在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件

{"ProdUrl":"http://text.com"}

第三步 引入generate-asset-webpack-plugin

在build/webpack.prod.conf.js中添加

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json');//引入根目录下的配置文件

const createJson = function() {
 return JSON.stringify(serverConfig);
};

//plugins 中使用
 plugins: [
  //打包时生成一个配置文件
  new GenerateAssetPlugin({
   filename: 'serverConfig.json',
   fn: (compilation, cb) => {
     cb(null, createJson());
   },
 }),
]

第四步 使用配置文件中的内容

这里根据不同项目不同需求代码自行变换,我分享一下我的项目里的使用。在main.js 中vue实例初始化之前将baseURL存到本地

axios.get('serverConfig.json').then( e => {
 let baseURL = e.data.ProdUrl
 localStorage.setItem("baseURL", baseURL);
 new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
 })
})

由于是使用axios获取,是异步方法,根据情况进行处理。、

好了接下来就再也不用为了域名每天build了

打包后的目录

vue项目接口域名动态获取操作

以上这篇vue项目接口域名动态获取操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 #Javascript
vue打包npm run build时候界面报错的解决
Aug 13 #Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 #Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 #Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 #Javascript
js实现幻灯片轮播图
Aug 14 #Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 #Javascript
You might like
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
php提取微信账单的有效信息
2018/10/01 PHP
解决laravel session失效的问题
2019/10/14 PHP
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Python 错误和异常小结
2013/10/09 Python
Python写的贪吃蛇游戏例子
2014/06/16 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
tensorflow识别自己手写数字
2018/03/14 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
在django中,关于session的通用设置方法
2019/08/06 Python
基于python实现查询ip地址来源
2020/06/02 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
python中温度单位转换的实例方法
2020/12/27 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
小区门卫岗位职责
2013/12/31 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
保护环境的建议书
2014/03/12 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
个人租房协议书样本
2014/10/01 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
Python 阶乘详解
2021/10/05 Python