vue-cli 搭建的專案處理不同環境下請求不同域名的問題

善良的烏賊發表於2018-03-15
Vue

使用 vue-cli 開發專案過程中, 根據開發環境和正式環境不同, 我們往往需要請求不同域名下的後臺介面, 這時候, 該怎麼去設定, 達到同一種寫法可以根據環境不同而自動切換請求域名呢? 本文將會介紹兩種配置方式.

本文中所有請求都是使用 axios

一

1、修改 config/dev.env.js (開發環境的配置)

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"http://localhost:3000"' // 開發環境介面地址(這裡是增加的內容)
})
複製程式碼

2、 修改 config/prod.env.js (正式環境的配置)

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"http://localhost:8888"'  // 正式環境介面地址(這裡是增加的內容)
}
複製程式碼

3、 使用 axios 傳送請求

axios.get(process.env.API_HOST + '/api/userData') // 請求前加上 `process.env.API_HOST`
  .then(data => {
    console.log(data)
  })
複製程式碼

二

第二種方法主要使用 axios 的建立例項的用法

在 main.js 配置 axios

import axios from 'axios'

const host = process.env.NODE_ENV === 'development' ? 'dev api host' : 'prod api host' // 根據 process.env.NODE_ENV 的值判斷當前是什麼環境
const instance = axios.create({
  baseURL: host
})

Vue.prototype.$http = instance
複製程式碼

在元件中呼叫

this.$http.get('/api/userData')
  .then(data => {
    console.log(data)
  })
複製程式碼

個人一般採用第二種方式，因為寫的方便。不知大家都是怎麼處理這個問題，歡迎分享。如果文章中有任何問題或者有更好的方式，也歡迎指正。

文章不好，也僅是分享我的一些觀點，感謝觀看！

相關文章