关于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")
}
};
这样配置还有一个好处，就是你只要改变了接口地址，你的代理的地址，回自动帮你改变，就再也不生产和测试环境来回的手动改了,
记得改完配置文件，要重启项目，才生效
放个本身的配置文件