vue项目动态域名设置方法

我们目前采用的是通过config.js配置文件来做接口域名和相关域名的配置，部署时需要后端在上线的服务器上对配置文件修改。

如果业务域名是从固定路径获取的可参考以下方案。

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

1. config文件

import { Getbyid } from '@/api/report/report'
import axios from 'axios'
const config = {/*** @description 配置显示在浏览器标签的title*/title: 'H5',/*** @description api请求基础路径*/baseUrl: {pro: 'http://8701/',//devZD: 'http://8003/',//proZD: 'http://8003/',},requestRemoteIp: () => { // 动态获取return new Promise((resolve, reject) => {Getbyid({id: '123456'}).then(res=>{if(res&&res.data&&res.data.Entity){let info = JSON.parse(res.data.Entity).TenantConfigDtoconfig.baseUrl.proZD = info.TerminalHost; resolve()}}).catch(function(error) {// SupplyChain.messageText('未配置租户信息！')resolve()})})}
}export default config

2. main.js

import config from '@/config'
import { router } from './router'
config.requestRemoteIp().finally(res => {new Vue({router,el: '#app',render: h => h(App)})
})

3. import axios from '@/utils/api.request.ZD'

import HttpRequest from '@/utils/axios.ZD'
import config from '@/config'
// 获取地址
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.devZD : config.baseUrl.proZD
const axios = new HttpRequest(baseUrl)
export default axios

4. axios.ZD.js

import axios from 'axios'import {Toast} from 'vant'class HttpRequest {constructor(baseUrl) {this.baseUrl = baseUrlthis.queue = {}}getInsideConfig(params) {const config = {baseURL: this.baseUrl,headers: {Authorization: localStorage.Authorization === undefined || localStorage.Authorization === '' ? '' : localStorage.Authorization,'Content-Type': 'application/json;charset=UTF-8'}}if (params.method === 'get') {config.data = {unused: 0}}return config}destroy(url) {delete this.queue[url]if (!Object.keys(this.queue).length) {// Spin.hide()}}interceptors(instance, url) {// 请求拦截instance.interceptors.request.use(config => {// 添加全局的loading...if (!Object.keys(this.queue).length) {// Spin.show() // 不建议开启，因为界面不友好}this.queue[url] = truereturn config},error => {return Promise.reject(error)})// 响应拦截instance.interceptors.response.use(res => {if (Number(res.data.status.code) === 401) {// localStorage.Authorization = ''// localStorage.removeItem('user')// localStorage.token = ''Toast.clear()Toast('请重新获取授权')return false} else if (Number(res.data.status.code) === 0) {const {data, status} = resreturn {data, status}} else {Toast.clear()Toast('响应出错请重新请求')return false}},error => {//  console.log('error', error)this.destroy(url)let errorInfo = error.responseif (!errorInfo) {const {request: {statusText, status},config} = JSON.parse(JSON.stringify(error))errorInfo = {statusText,status,request: {responseURL: config.url}}}return Promise.reject(error)})}request(options) {// const instance = axios.create({ Cookie: document.cookie })const instance = axios.create()const header = this.getInsideConfig(options)options = Object.assign(header, options)this.interceptors(instance, options.url)return instance(options)}
}export default HttpRequest

vue项目动态域名设置方法相关推荐

vue 获取动态域名_vue项目接口域名动态获取操作
需求: 接口域名是从外部 .json 文件里获取的. 思路: 在开始加载项目前进行接口域名获取,然后重置接口域名的配置项. 实现: 1.config/index.js 文件进行基础配置 impo ...
Swiper4.5在vue项目中的使用方法
一. 效果图 · 渐变式 · gif 动画演示: 二.首先,npm 安装 swiper 用swiper,所以要先在框架内npm install --save swiper安装它. 安装完成之后,你会在 ...
Win10 + VSCode踩坑 + vue项目开发：设置vscode终端为管理员权限
win10系统如何设置vscode的终端为管理员权限? 一次一次的授权太麻烦! 这里直接更改授权为管理员运行即可. 操作与设置步骤: "桌面找到"VSCode"程序图标 ...
记一次升级node版本后，运行原vue项目报错问题解决方法
记一次升级node版本后,运行原vue项目报错问题解决方法参考文章: (1)记一次升级node版本后,运行原vue项目报错问题解决方法 (2)https://www.cnblogs.com/happ ...
二级域名三级域名设置方法
因为网站需要,要设定二级和三域名,写个东西出来,大家看看. 比如您的域名是haoday.com,需要增加一个二级域名bbs.haoday.com,当然www.haoday.com也是二级域名,只不过是 ...
vue项目动态换皮肤/换主题的通用实现方式（热换肤，无需重启项目，通俗易懂，看了就会！！！）
VUE项目动态切换皮肤/主题的通用实现方式提供一种通用的的解决方案,无需重启项目,无需更改import的文件路径,直接通过功能按钮热更换皮肤/主题 vue-cli版本:3.0 1. 在pulic目录 ...
蚂蚁分类信息系统Nginx伪静态规则支持二级域名设置方法
蚂蚁分类信息系统Nginx伪静态规则支持二级域名设置方法 nginx环境中蚂蚁分类信息系统支持二级域名访问实现方法 1.后台生成所有城市目录 2.nginx伪静态增加配置 if ( $host ~* ...
Vue项目中如何设置动态的TDK
TDK是什么 TDK就是网站的标题(title).描述(description)和关键词(keyword) TDK在哪里上面大佬对TDK的概念解释的很全面,但是在网页中的TDK在哪里呢,作为开发人员 ...
vue项目中如何设置ico图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题: 1.首先如何制作ico图标,本人使用的是比特虫在线制作ico图标,使用方法 ...
vue的html自动刷新,vue项目刷新当前页面的方法
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...

vue项目动态域名设置方法

vue项目动态域名设置方法相关推荐

最新文章

热门文章