前言:项目开发的时候,一般会有多个环境,比如开发环境,测试环境,生产环境,我们调用接口的时候,不同环境调用不同的接口,所以要配置环境,方便访问.
配置环境
1.方式01
在项目中找到项目发送请求的文件,在这里我的是/src/api/request.js文件
在request.js中配置请求数据的地址
let env = process.env.NODE_ENV;
let baseURL;
// 开发环境
if (env === "development") {
baseURL = "http://localhost:3003";
} else {
baseURL = "http://huruqing.cn:3003";
}
const service = axios.create({
// 如果换了新的项目, 需要更换为新的接口地址
baseURL: baseURL,
timeout: 50000, // 请求超时时间(因为需要调试后台,所以设置得比较大)
});
2.方式02
2-1:在根目录添加env文件,配置环境变量
根目录下新建文件
开发环境.env.development
//内容
VUE_APP_URL="http://192.168.2.21:3003"
生产环境.env.production
//内容
# 配置生产地址,就是你将来发布上线的地址
NODE_ENV="production"
VUE_APP_URL="http://81.71.65.4:3003"
2-2:在项目的任何一个地方,都可以通过process.env.VUE_APP_URL来获取
//axios配置地址
const service = axios.create({
// 配置基本路径
baseURL: process.env.VUE_APP_URL,
timeout: 50000, // 请求超时时间(因为需要调试后台,所以设置得比较大)
});
注意:使用env文件配置环境变量,缺点就是修改了地址,需要重启项目,所以我一般喜欢这样配置
process.env.NODE_ENV的值在开发中是"development", 在打包之后(生产), 它的值是"production", 下面的配置确定了生产环境的地址, 至于开发时的环境就任由我们填写了, 当然有时还会有"测试环境", 是开发好之后提供给测试人员去测试的环境
let env = process.env.NODE_ENV;
let baseURL;
if (env === 'production') {
baseURL = "http://huruqing.cn:3003";
} else {
baseURL = "http://192.168.2.21:3003";
}
const service = axios.create({
baseURL,
timeout: 50000,
});
配置跨域
1.首先在vue.config.js文件中
没有vue.config.js文件,就新建一个该名称的文件,先配置该文件
// vue.config.js里配置
devServer: {
// 代理
proxy: {
// 只要请求地址有'api'都会匹配上
"/api": {
target: "http://81.71.65.4:3003",
ws: true,
// 允许跨域
changeOrigin: true,
pathRewrite: {
"^/api": "", //通过pathRewrite重写地址，将前缀/api转为/
},
},
},
},
2.项目配置方法一
在写好发送请求的文件中配置,我这里是/src/api/request.js文件
// api/request.js 的配置
let env = process.env.NODE_ENV; // development-开发环境, production-生产环境
let baseURL = "";
env = 'test';
if (env === "production") {
// 生产接口
baseURL = "http://huruqing.cn:3003";
} else if (env==='test'){
// 本地跨域访问服务器端接口
baseURL = '/api';
} else {
// 开发环境接口(或者访问模拟数据接口)
baseURL = "http://192.168.2.21:3003";
}
const service = axios.create({
baseURL,
timeout: 50000
});
3.项目配置方法二
使用了env文件,将.env.development文件内容进行简单的修改即可
VUE_APP_URL="/api"
注意:请求接口时,网络查看依然是本地的地址,实际上请求的却是跨域里配置的地址
比如请求一下接口:
//该页面需要先导入axios
$axios.post('/api/product/list')
查看网络请求,查看到的是http://localhost:8080/api/product/list,但是实际上是通过代理请求proxy的地址是http://81.71.65.4:3003/product/list,"api"被重写成了"",所以接口就没有api这个字符串了
