配置示例
import { defineConfig, loadEnv } from 'vite';
const { resolve } = require('path');
import createVitePlugins from './vite/plugins';
// https://vitejs.dev/config/
export default ({ mode, command }) => {
const env = loadEnv(mode, process.cwd());
const { VITE_APP_BASE } = env;
return defineConfig({
base: VITE_APP_BASE,
server: {
port: 2888,
proxy: {
'/api': {
target: 'http://localhost',
//target: 'http://test3.javablade.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
},
},
},
resolve: {
alias: {
'~': resolve(__dirname, './'),
'@': resolve(__dirname, './src'),
components: resolve(__dirname, './src/components'),
styles: resolve(__dirname, './src/styles'),
utils: resolve(__dirname, './src/utils'),
},
},
plugins: createVitePlugins(env, command === 'build'),
});
};配置解读
这段代码是一个 Vite 配置文件（vite.config.js），用于配置 Vite 构建工具的行为和选项。
首先，代码使用 ES6 模块语法引入了两个模块 defineConfig 和 loadEnv，这两个模块来自于 Vite 的依赖包 ‘vite’。同时，还引入了 Node.js 内置模块 path。
接下来，代码定义了一个默认导出的函数，该函数接受一个对象参数 { mode, command }，表示当前的模式（开发或生产）和命令（dev、serve、build）。
在函数体内，首先通过 loadEnv 方法从环境变量中加载特定模式的环境配置，并将其赋值给变量 env。loadEnv 方法是 Vite 提供的一个辅助函数，用于根据当前模式和工作目录加载环境变量。
然后，从 env 中获取 VITE_APP_BASE 环境变量的值，并将其赋值给 base 选项。base 选项用于指定应用程序的基本路径，即应用程序部署时的 URL 前缀。
接下来，配置了 server 选项，用于配置开发服务器的行为。在该配置中，设置了服务器的端口号为 2888，并配置了一个代理规则。该代理规则将以 ‘/api’ 开头的请求转发到目标地址为 ‘http://localhost’，并进行一些额外的配置，比如设置请求路径的重写规则。
然后，配置了 resolve 选项，用于配置模块解析的别名。别名可以简化模块路径的书写，使得引入模块时可以使用更短的路径。
最后，调用了自定义函数 createVitePlugins，并传入 env 和一个判断是否为构建模式的条件。该函数用于创建 Vite 插件，并将插件配置添加到 Vite 的配置中。
整体来说，这段代码是一个 Vite 配置文件，通过配置不同的选项和行为，来满足项目的需求，并且可以根据不同的模式和命令加载相应的环境变量和执行特定的逻辑。
增加请求代理规则
要在上述代码中增加将以 /api2 开头的请求转发到目标地址为 http://localhost:8888，可以在 server 选项的 proxy 对象中添加一个新的规则。下面是修改后的代码：
import { defineConfig, loadEnv } from 'vite';
const { resolve } = require('path');
import createVitePlugins from './vite/plugins';
export default ({ mode, command }) => {
const env = loadEnv(mode, process.cwd());
const { VITE_APP_BASE } = env;
return defineConfig({
base: VITE_APP_BASE,
server: {
port: 2888,
proxy: {
'/api': {
target: 'http://localhost',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
},
'/api2': {
target: 'http://localhost:8888',
changeOrigin: true,
rewrite: path => path.replace(/^\/api2/, ''),
},
},
},
resolve: {
alias: {
'~': resolve(__dirname, './'),
'@': resolve(__dirname, './src'),
components: resolve(__dirname, './src/components'),
styles: resolve(__dirname, './src/styles'),
utils: resolve(__dirname, './src/utils'),
},
},
plugins: createVitePlugins(env, command === 'build'),
});
};在上述代码中，新增了一个 /api2 的代理规则，该规则将以 /api2 开头的请求转发到目标地址为 http://localhost:8888。配置中的 changeOrigin 选项设置为 true，表示修改请求头中的 Origin 字段，确保目标服务器可以正确识别请求来源。同时，使用 rewrite 方法将请求路径中的 /api2 前缀去除，以便正确转发请求。
请注意，修改后的代码仅仅是增加了一个新的代理规则，其余部分与原始代码保持不变。
