溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹vue項目接口域名動態的獲取方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
需求：
接口域名是從外部 .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 config2、項目下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項目接口域名動態的獲取方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
