vue實踐---根據不同環境,自動轉換請求的url地址操作
一般的專案環境分為：本地環境，測試環境，預發環境，正式環境。 這些環境的域名一般是一樣的， 前端請求介面的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地址操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。