溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一般的項目環境分為：本地環境，測試環境，預發環境，正式環境。 這些環境的域名一般是一樣的， 前端請求接口的url也會隨著這些環境的變化而改變，手動修改有點麻煩，所以想個辦法，讓請求的地址根據域名改變而改變。
第一步：
建立一個RequestConfig.js 作為配置文件，內容如下：
const APIMapping = {
project1: {
test: 'http://123.com',
local: 'http://abc.com'
},
project2: {
test: 'http://123.com',
local: 'http://abc.com'
}
}
const currentEnvMapping = {
'127.0.0.1': 'test',
'localhost': 'local',
}
export { currentEnvMapping, APIMapping }
這里只列舉了測試環境，和本地環境，其他環境使用方法一樣。
APIMapping是所有的項目，這里有 project1，project2 ；每個項目分為本地環境（test），測試環境（local）;
currentEnvMapping 指明什么域名下使用本地環境的域名，還是測試環境的域名。
第二步
使用vuex, 建立一個store文件存放vuex, 然后再建立index.js存放數據：
import Vue from 'vue'
import Vuex from 'vuex'
import { APIMapping, currentEnvMapping } from './../common/RequestConfig.js'
Vue.use(Vuex)
const state = {
// 這里currentEnvMapping[location.hostname]確定是test， 還是local環境
// APIMapping['project1']確定了是哪個項目
// APIMapping['project1'][currentEnvMapping][location.hostname]最終確定了url
RequestHost: APIMapping['project1'][currentEnvMapping[location.hostname]]
}
const getters = {
get_RequestHost: state => {
return state.RequestHost
}
}
export default new Vuex.Store({
state,
getters
})
第三步
就可以使用了，跟正常的vue一樣，代碼如下：
mounted(){
console.log(this.$store.getters.get_RequestHost)
}
具體的代碼看這里: https://github.com/YalongYan/vue-practice/tree/master/dynamic-request
補充知識：vue-cli項目生產環境和開發環境請求接口配置，不用手動切換，自動切換地址的問題
1、在dev.env.js文件中添加配置(開發環境)：
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
url_api: '"api"' // 添加的請求接口，鍵值都可以自定義，
})
2、在prod.env.js文件中添加配置（生產環境）:
'use strict'
module.exports = {
NODE_ENV: '"production"',
url_api: '"http://192.168.0.30/server-carApp/"' // 添加的鍵值對，鍵開發和生成環境要保持一致，值是打包后上線的地址
}
3、在axios請求文件中，通過process.env.url_api就可以拿到請求的根接口，
我的請求文件中的設置：
const service = axios.create({
baseURL: process.env.url_api, // 通過process.env.url_api拿到請求的地址
withCredentials: true,
timeout: 60 * 1000
})
我之所以在開發環境中配置url_api的值為api，是因為我在config/index.js中配置的跨域代理寫的是api，
config下的index.js文件中關于跨域代理的配置
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://192.168.0.30/server-carApp/', // 后臺接口
changeOrigin: true, // 是否開啟跨域
// secure: false, // 如果是https接口，需要配置這個
pathRewrite: {
'^/api': ''
}
}
},
。。。。。。
4、同樣的，在具體的.vue組件文件中，也可以通過process.env.url_api拿到根api接口地址，然后可以用字符串拼接，得到想要的完整url請求地址。
例如，在login.vue文件中，有一個圖片驗證碼的地址，
<template>
<img :src="codeImgSrc" alt="圖片驗證碼"/>
</template>
<script>
// 這樣根路徑就被引入進來了，不用在打包上線的時候在具體的文件中改資源路徑
const imgUlr = process.env.url_api + '/main/validate/qrCode?w=300&h=80'
export default {
name: 'Login',
data() {
return {
codeImgSrc: imgUlr,
}
}
}
</script>
以上這篇vue實踐---根據不同環境,自動轉換請求的url地址操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
