vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
// proxy:{
// '/api':{//表示拦截以/api开头的请求路径
// target:'https://api.apiopen.top/api',
// // target:'https://mock.mengxuegu.com/mock/63368eebfc3600383bca2053/blog-admin',
// changOrigin: true,//是否开启跨域
// pathRewrite:{
// '^/api':'' //重写api,把api变成空字符,因为我们真正请求的路径是没有api的
// }
// }
// }
proxy: { // 开发环境代理配置
// '/dev-api': {
[process.env.VUE_APP_BASE_API] :{
// 目标服务器地址,代理访问 http://localhost:8001
target: process.env.VUE_APP_SERVICE_URL,
// target:"http://localhost:8888/",
changeOrigin: true, // 开启代理服务器,
pathRewrite: {
// /dev-api/db.json 最终会发送 http://localhost:8001/db.json
// 将 请求地址前缀 /dev-api 替换为 空的,
// '^/dev-api': '',
[ '^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
}
})
.env.development
# 只有以 VUE_APP_ 开头的变量会被 webpack 静态嵌入到项目中进行使用 process.env.VUE_APP_xxxxxx
# 目标服务接口地址,这个地址是按照你自已环境来的, 添加 或者更改配置后,需要重启服务
VUE_APP_SERVICE_URL = 'https://api.apiopen.top/api'
# 开发环境的前缀
VUE_APP_BASE_API = '/dev-api'
在request.js
//用来做拦截的
import axios from 'axios';
const instance = axios.create({
// baseURL: 'https://api.apiopen.top/api',
// baseURL:'api',//把原来的项目地址,改成api,解决跨域问题
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000,
});