建设网站公司谁家好营销引流都有什么方法
Vite 是前端构建工具，常用配置主要在 vite.config.js 中，以下是核心配置项及示例：
1. 基础配置：resolve（模块解析）
- 作用：配置模块别名、文件后缀等。
- 示例：
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: {
'@': '/src', // 给 src 目录设置别名
},
extensions: ['.js', '.vue', '.json'] // 自动补全的文件后缀
}
})
2. 开发服务器配置：server
- 作用：设置本地服务器参数（端口、代理等）。
- 示例：
export default defineConfig({
server: {
port: 3000, // 启动端口
open: true, // 自动打开浏览器
proxy: {
'/api': {
target: 'http://localhost:5000', // 接口代理地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
3. 构建配置：build
- 作用：设置打包参数（输出路径、文件压缩等）。
- 示例：
export default defineConfig({
build: {
outDir: 'dist', // 打包输出目录
chunkSizeWarningLimit: 1000, // 单文件体积警告阈值（KB）
minify: 'terser', // 代码压缩方式，可选 'esbuild'（更快）或 'terser'（更彻底）
rollupOptions: {
output: {
chunkFileNames: 'js/[name]-[hash].js', // chunk 文件名格式
assetFileNames: 'assets/[name]-[hash].[ext]' // 静态资源命名格式
}
}
}
})
4. 框架集成配置（以 Vue 为例）
- 作用：配置 Vue 单文件组件（.vue）解析。
- 示例：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue() // 引入 Vue 插件，处理 .vue 文件
]
})
5. 环境变量配置：defineConfig 与 .env 文件
- 在 vite.config.js 中定义全局变量：
export default defineConfig({
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
})
- 通过 .env 文件读取环境变量（如 .env.development 开发环境配置）：
// .env.development
VITE_APP_API = '/dev-api'
在代码中通过 import.meta.env.VITE_APP_API 访问。
6. 性能优化：esbuild 配置
- 作用：利用 Esbuild 加速 JS/TS 编译。
- 示例：
export default defineConfig({
esbuild: {
jsxFactory: 'h', // Vue 3 JSX 工厂函数
jsxFragment: 'Fragment'
}
})
核心配置总结
- 开发时：重点配置 server （端口、代理）和 resolve （别名）。
- 打包时：关注 build （输出路径、压缩）和 rollupOptions （资源分块）。
- 框架集成：通过插件（如 @vitejs/plugin-vue ）支持特定框架。
根据项目需求，可灵活组合这些配置，提升开发和构建效率。