需求：

接口域名是從外部 .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項目接口域名動態獲取操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。