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 继承使用分析
May 12 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
js进行表单验证实例分析
Feb 10 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
puppeteer库入门初探
Jan 09 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 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
php PDO中文乱码解决办法
2009/07/20 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
Js面试算法详解
2018/04/08 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python元组操作实例解析
2014/09/23 Python
Python中类的继承代码实例
2014/10/28 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
servlet面试题
2012/08/20 面试题
成考报名单位证明范本
2014/01/16 职场文书
中班开学寄语
2014/04/04 职场文书
单位介绍信格式
2015/01/31 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server