一、固定式代理设置

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}`), '')
        }
      }
    },
  }
})