「Vite」Vite4+vue3工程结合环境变量，配置proxy代理

前言

基于vite4+vue3搭建的工程，和后端联调时需要先配置proxy，配置代理的过程中遇到一些问题（比如启动报错、接口访问404等等），弯弯曲曲走了很多坑和弯路！这里我直接贴上解决思路和相关代码了，伙伴们有问题可以直接评论或者私信！

在这里插入图片描述

配置

1.配环境变量
在项目根文件下建 .env.development 和 .env.production 两个文件

在这里插入图片描述

.env.development文件代码

# 当前环境
NODE_ENV = 'development'

# 标题
VITE_APP_TITLE = ''

# API前缀
VITE_APP_BASE_API = '/api'

# 服务器地址配置
VITE_SERVER = 'http://jsonplaceholder.typicode.com'

.env.production文件代码

# 当前环境
NODE_ENV = 'production'

# 标题
VITE_APP_TITLE = ''

# API前缀
VITE_APP_BASE_API = '/prod-api'

# 服务器地址配置
VITE_SERVER = ''

2.vite.config.js配置文件

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 添加第三个参数空字符串时 '' ,会在env中包含所有环境变量；反之，只包含.env文件中配置的环境变量
  const env = loadEnv(mode, process.cwd(), '') 
  return {
   // 关键代码
   server: {
      host: '0.0.0.0',
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_SERVER,
          changeOrigin: true,
          rewrite: (path) =>
            path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ''),
        },
      },
    },
  }
})

loadEnv不携带第3个参数时，打印出env。如下（可以发现，就是.env文件中的配置）

在这里插入图片描述

3.axios中进行baseURL配置

const instance = axios.create({
  // 在接口前面加上VITE_APP_BASE_API，这样可以转发给对应的服务器
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 5000,
})

在这里插入图片描述

4.配置接口+页面中调用
接口，我这里测试一个：

在这里插入图片描述

然后在页面中引入调用

在这里插入图片描述

可以在控制台上看到，打印成功

在这里插入图片描述

然后就可以肆无忌惮的在页面上操作数据啦！
完美~

「Vite」Vite4+vue3工程 结合环境变量，配置proxy代理

前言

配置

悦读

「Vite」Vite4+vue3工程结合环境变量，配置proxy代理