一、固定式代理设置
1、设置固定请求头(axios)
设置请求前缀 '/api',那么项目所有的请求都会是以'/api'开头
以请求'/login'为例:请求为 :'http://127.0.0.1:5173/api/login'
但是我们请求的地址是 'http://localhost:3001/login',此时就要用代理来完成。
2、设置代理
在vite.config.js文件中设置代理
代码如下
server: {
// http://localhost:5173/api/login -> http://localhost:3001/login
proxy: {
'/api': {
target: 'http://localhost:3001',
changeOrigin: true,
rewrite: path => path.replace(RegExp(`^api`), '')
},
}
},
代理的原理是:
当页面调用 login 方法浏览器掉用的接口是 'http://localhost:5173/api/login',
检测到当前请求包含'/api',因为配置了代理,
把'/api'以及请求域名('http://localhost:5173/api')整体替换为'http://localhost:3001',
所以真正请求的地址是'http://localhost:3001/login',
二、配置式代理设置
1、配置文件
.env.development:开发环境下的配置文件,执行npm run serve命令,会自动加载.env.development文件.
.env.production:生产环境下的配置文件,执行npm run build命令,会自动加载.env.production文件
命名规则
Vite 中的
.env
文件还可以用于配置构建时的变量需要注意的是,Vite 中的环境变量必须以
VITE_
前缀开头才能被识别。例如,如果您在.env
文件中定义了一个名为API_URL
的变量,它将不会被 Vite 识别。您应该将其命名为VITE_API_URL。
此外,需要将
.env
文件放置在项目根目录下,并且只能包含键值对,例如:VITE_APP_BASE_API = '/api' #本地环境接口地址 VITE_SERVE = 'http://localhost:3001'
.env.development文件配置
# 本地环境
NODE_ENV = 'development'
VITE_APP_TITLE = 'dev-project'
VITE_APP_BASE_API = '/api'
#本地环境接口地址
VITE_SERVE = 'http://localhost:3001'
.env.production文件配置
# 生产环境
NODE_ENV = 'production'
VITE_APP_TITLE = 'pro-project'
VITE_APP_BASE_API = '/prod-api'
#生产环境接口地址
VITE_SERVE = 'http://www.test.com'
axios请求配置文件
vite弃用了process.env改用import.meta.env
vite.config.js中不能使用import.meta.env
const service = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 30000 // request timeout })
2、代理文件设置
参考Vite官网:
vite.config.js文件需要改一下,如下图:
代码如下:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig(({ mode, command, ssrBuild }) => {
const env = loadEnv(mode, process.cwd());
console.log(env.VITE_APP_BASE_API);
return {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
// http://localhost:5173/api/login -> http://localhost:3001/login
proxy: {
[env.VITE_APP_BASE_API]: {
target: env.VITE_SERVE,
changeOrigin: true,
rewrite: path => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), '')
}
}
},
}
})