700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue项目动态域名设置方法

vue项目动态域名设置方法

时间:2018-09-08 18:06:05

相关推荐

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.proZDconst 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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。