關於vue.config.js中配置前端代理

時間 2021-08-13

標籤 html vue node webpack ios git github web vue-cli npm 欄目 JavaScript 简体版

原文原文鏈接

寫在前邊
注意開發環境的本地代理或者測試環境的代理，在部署到正式上時，必定要換成線上的IP地址，否則，數據拿不到哦html

代理配置vue

esay mock新地址模擬接口地址，就以第一個進行說明怎麼配置和使用了, 只說代理配置部分，其它再也不說明node

新建項目（略過le... ）webpack

ip地址配置成自動切換的ios

首先在項目中新建git

vue.config.js (cli配置文件) github

.env.development (配置開發和測試接口地址) web

.env.production (配置生產環境接口地址) vue-cli

關於上邊那個配置文件參考 vue-cli 文檔，連接過去的這一塊內容npm

先放個項目目錄

.env.production（將下邊的內容放進去）

## 配置測試和本地開發時的接口地址
VUE_APP_URL = "你的開發或測試接口地址"

.env.development（將下邊的內容放進去）

## 配置正式接口地址
VUE_APP_URL = "你的正式接口地址"

vue.config.js (代理配置參考文檔 proxy 代理 )

如下邊的接口來來測試（https://www.easy-mock.com/mock/5ce2a7854c85c12abefbae0b/api）

將.env.development（將下邊的內容放進去）改掉，換成上邊的地址

## 配置測試和本地開發時的接口地址
VUE_APP_URL = "https://www.easy-mock.com/mock/5ce2a7854c85c12abefbae0b/api"

vue.config.js中的 devServer 屬性下進行配置

在main.js 中打印恰好拿到上邊的地址

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
render: h => h(App)
}).$mount("#app");

console.log(process.env.VUE_APP_URL);
打印結果

測試請求（我就在 main.js 中配置了）

import Vue from "vue";
import App from "./App.vue";
import axios from "axios";
Vue.config.productionTip = false;

// axios.get("")
axios.baseURL = process.env.VUE_APP_URL;

console.log(process.env.VUE_APP_URL);

axios.get("/api/new_article").then(res => {
console.log(res);
});

new Vue({
render: h => h(App)
}).$mount("#app");

看一下 network （網絡），接口已經被代理到本地

看一下上邊的那個註釋的那個 pathRewrite 屬性的使用

修改 .env.development 文件

## 配置測試和本地開發時的接口地址
VUE_APP_URL = "https://www.easy-mock.com/mock/"

const port = 8589; // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
devServer: {
port,
open: true,
overlay: {
warnings: false,
errors: true
},
// 配置代理（以接口 https://www.easy-mock.com/mock/5ce2a7854c85c12abefbae0b/api 說明）
proxy: {
"/api": {
// 以「/api」開頭的代理到下邊的 target 屬性的值中
target: process.env.VUE_APP_URL,
changeOrigin: true, // 是否改變域名
ws: true,
pathRewrite: {
// 路徑重寫
"/api": "5ce2a7854c85c12abefbae0b/api" // 這個意思就是以api開頭的，定向到哪裏, 若是你的後邊還有路徑的話，會自動拼接上
}
}
}
// 下邊這個，若是你是本地本身mock 的話用after這個屬性，線上環境必定要幹掉
// after: require("./mock/mock-server.js")
}
};
這樣配置還有一個好處，就是你只要改變了接口地址，你的代理的地址，回自動幫你改變，就再也不生產和測試環境來回的手動改了,
記得改完配置文件，要重啓項目，才生效
放個本身的配置文件