vite.config.js 是Vite 项目的配置文件，分析具体用法
vite.config.js 是 Vite 项目的配置文件，用于定义项目的构建、开发服务器、插件等配置选项。以下是示例代码中各部分的作用分析：
1. 导入模块
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
-
fileURLToPath和URL：用于处理文件路径，将基于 URL 的路径转换为本地文件路径。 -
defineConfig：从 Vite 中导入的辅助函数，用于定义配置对象，提供更好的类型提示和代码提示。 -
vue：从@vitejs/plugin-vue导入 Vue 插件，用于支持 Vue 文件的解析和处理。 -
vueDevTools：从vite-plugin-vue-devtools导入 Vue 开发工具插件，用于在开发过程中提供 Vue 开发工具支持。
2. 配置对象
export default defineConfig({
plugins: [
vue(), //通过 vue() 插件，项目可以使用 Vue 3 的单文件组件（SFC）
vueDevTools(), //通过 vueDevTools() 插件，开发者可以在浏览器中使用 Vue 开发工具进行调试。
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
//使用路径别名 @，简化对 src 文件夹下模块的引用
},
},
})
-
**
plugins**：-
vue()：启用 Vue 插件，允许项目中使用.vue文件，并支持 Vue 的单文件组件（SFC）。 -
vueDevTools()：启用 Vue 开发工具插件，方便在开发过程中调试 Vue 应用。
-
-
**
resolve**：alias：定义路径别名，用于简化路径引用。-
'@'：将路径别名@映射到项目根目录下的src文件夹。例如，@/components实际上指向src/components。 -
fileURLToPath(new URL('./src', import.meta.url))：动态计算src文件夹的绝对路径，确保路径的正确性。
-
路径别名@作用：可以方便引用src文件夹下面的.vue组件
3. vite.config.js 的作用
- 配置开发服务器：
-
定义开发服务器的行为，例如端口号、代理设置等。
-
- 构建配置：
-
定义构建过程中的行为，例如输出目录、代码压缩等。
-
- 插件管理：
-
加载和配置插件，扩展 Vite 的功能，例如支持 Vue、React 等框架。
-
- 路径别名：
-
定义路径别名，简化模块路径引用，提高代码可读性。
-
- 环境变量：
-
通过
process.env或loadEnv加载和使用环境变量，支持不同环境下的配置。
-
前后端分离项目：
在 vite.config.js 中配置后端服务器通常是为了在开发过程中实现前端与后端的接口代理，解决开发环境下的跨域问题。Vite 提供了 server.proxy 配置项，用于设置代理规则，将前端请求转发到后端服务器。通过 Vite 的代理功能，解决了开发环境下的跨域问题，并简化了前端与后端的接口对接。适用于前后端分离的开发模式。
以下是如何在 vite.config.js 中配置后端服务器的示例和说明：
示例代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
// 配置代理规则
'/api': {
target: 'http://localhost:3000', // 后端服务器地址
changeOrigin: true, // 是否启用跨域
rewrite: (path) => path.replace(/^\/api/, '') // 重写路径
},
'/auth': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
})
配置说明
1. server.proxy
server.proxy 是 Vite 提供的代理配置项，用于将前端开发服务器的请求转发到后端服务器。它是一个对象，键是前端请求的路径前缀，值是一个代理配置对象。
2. 代理配置对象
每个代理规则可以包含以下常用配置项：
-
**
target**：后端服务器的地址。target: 'http://localhost:3000'
这是代理的目标地址，表示后端服务器的 URL。所有匹配 /api 的请求都会被转发到 http://localhost:3000。 -
**
changeOrigin**：是否启用跨域。设置为true可以避免跨域问题。启用跨域资源共享（CORS）。当设置为 true 时，代理会修改请求的 Origin 头，使其与目标服务器的地址一致。这可以避免浏览器的跨域限制。 -
**
rewrite**：可选的路径重写函数。用于修改请求路径，例如去掉路径前缀。前端请求路径为 /api/users，经过重写后，路径变为 /users。
3. 示例解析
在上述示例中：
-
当前端请求路径以
/api开头时，Vite 会将请求转发到http://localhost:3000。 -
'/api':
这是代理规则的键，表示前端请求路径的前缀。当请求路径以 /api 开头时，这条代理规则会被触发。例如：
前端请求 /api/users 会匹配这条规则。
前端请求 /api/posts 也会匹配这条规则。 -
请求路径会通过
rewrite函数进行处理，去掉/api前缀。例如，前端请求/api/users会被转发到http://localhost:3000/users。后端服务器的接口路径是 /users 和 /posts，而不是 /api/users 和 /api/posts。如果不进行路径重写，转发后的请求路径将是 http://localhost:3000/api/users，这显然不符合后端的接口路径设计。通过路径重写，可以确保请求路径与后端接口一致。 -
如果后端接口路径本身包含
/api前缀（例如http://localhost:3000/api/users），则不需要路径重写。 -
/auth路径的请求同样会被转发到http://localhost:3000，但没有路径重写。
配置后端服务器的其他注意事项
1. 支持 HTTPS
如果后端服务器使用 HTTPS，需要在 target 中指定完整的 HTTPS 地址，并可能需要配置 secure 属性：
'/api': {
target: 'https://example.com',
secure: false, // 如果后端证书不是由受信任的 CA 签发，可以设置为 false
changeOrigin: true
}
2. WebSocket 代理
如果需要代理 WebSocket 请求，可以添加 ws: true 选项。
如果后端服务器使用 WebSocket，可以通过 ws 属性启用 WebSocket 代理：
'/ws': {
target: 'ws://localhost:3000',
ws: true, // 启用 WebSocket 代理
changeOrigin: true
}
3. 多个后端服务
如果项目需要代理到多个后端服务，可以定义多个代理规则：
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
},
'/admin': {
target: 'http://localhost:4000',
changeOrigin: true
}
}
}
4. 环境变量
代理配置也可以通过环境变量动态设置，例如：
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '')
return {
server: {
proxy: {
'/api': {
target: env.VITE_BACKEND_URL || 'http://localhost:3000',
changeOrigin: true
}
}
}
}
})
在 .env 文件中可以设置：
VITE_BACKEND_URL=http://localhost:3000