vue項目接口域名動態(tài)的獲取方法

發(fā)布時間：2020-08-14 14:11:51 來源：億速云閱讀：608 作者：小新欄目：開發(fā)技術(shù)

這篇文章主要介紹vue項目接口域名動態(tài)的獲取方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

需求：

接口域名是從外部 .json 文件里獲取的。

思路：

在開始加載項目前進行接口域名獲取，然后重置接口域名的配置項。

實現(xiàn)：

1、config/index.js 文件進行基礎(chǔ)配置

import axios from 'axios'

const config = {
 requestUrl: 'http://qiniu.eightyin.cn/path.json', //動態(tài)域名所在地址
 baseUrl: {
  dev: '/api/',
  pro: 'http://xxx.com/' // 接口域名，會被動態(tài)覆蓋
 },

 requestRemoteIp: () => { // 動態(tài)獲取
  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 文件進行動態(tài)獲取

import config from '@/config/index.js'

// 讀取接口域名
config.requestRemoteIp().finally(res => {
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
 
  router,
  components: { App },
  template: '<App/>'
 })
});

3、請求數(shù)據(jù)

const instance = axios.create({
   baseURL: process.env.NODE_ENV === 'development' &#63; config.baseUrl.dev : config.baseUrl.pro
  })

補充知識：webpack + vue 打包生成公共配置文件（域名）方便動態(tài)修改

需求原因

原來的項目中域名是打包到項目里面的，打包后不能動態(tài)配置，只能通過不同的指令打包來切換域名，每天都在測試域名和正式域名來回摩擦，后臺大佬說你們可以生成一個配置文件這樣就不用頻繁打包了直接修改配置文件就好，于是就有了這篇文章。

第一步安裝插件

npm install --save-dev generate-asset-webpack-plugin

第二步新建配置文件

在項目的根目錄下新建 serverConfig.json 以后會根據(jù)這個文件去生成打包的配置文件

{"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());
   },
 }),
]

第四步使用配置文件中的內(nèi)容

這里根據(jù)不同項目不同需求代碼自行變換，我分享一下我的項目里的使用。在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獲取，是異步方法，根據(jù)情況進行處理。、

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

打包后的目錄

vue項目接口域名動態(tài)的獲取方法

以上是vue項目接口域名動態(tài)的獲取方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

vue項目接口域名動態(tài)的獲取方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽