vue專案介面域名動態獲取操作

阿新 • • 發佈：2020-08-14

需求：

介面域名是從外部 .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',store,i18n,render: h => h(App)
 })
})

由於是使用axios獲取，是非同步方法，根據情況進行處理。、

好了接下來就再也不用為了域名每天build了

打包後的目錄

vue專案介面域名動態獲取操作