1 基本配置
Vite 的配置文件 vite.config.js 是基于 JavaScript 或 TypeScript 的文件，可以使用 ES 模块语法进行导出。Vite 通过这个配置文件来调整各种构建和开发的选项。
1.1 创建配置文件
在项目根目录创建 vite.config.js 文件：
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
// 基本配置项在这里
})
1.2 常用基本配置
root
指定项目的根目录（默认是当前工作目录）：
export default defineConfig({
root: 'src'
})
base
设置项目的基本公共路径（默认是 /）。当你需要将项目部署在非根目录时，调整这个参数：
export default defineConfig({
base: '/my-app/'
})
publicDir
指定静态资源目录（默认是 public）。在这个目录中的文件会被复制到输出目录的根部：
export default defineConfig({
publicDir: 'static'
})
cacheDir
指定缓存目录（默认是 node_modules/.vite），用于存储预构建的依赖：
export default defineConfig({
cacheDir: '.vite-cache'
})
2 环境变量和模式
Vite 支持基于文件的环境变量配置，你可以根据不同的构建模式（如开发模式和生产模式）使用不同的环境变量。
2.1 环境变量文件
你可以在项目根目录中创建 .env 文件来定义环境变量：
# .env
VITE_APP_TITLE=My Vite App
对于特定模式的环境变量文件，可以命名为 .env.[mode]：
# .env.production
VITE_APP_TITLE=My Vite App (Production)
2.2 使用环境变量
在代码中，通过 import.meta.env 访问环境变量：
console.log(import.meta.env.VITE_APP_TITLE)
2.3 环境变量的替换
Vite 会在构建时替换 import.meta.env 中的变量：
const apiUrl = import.meta.env.VITE_API_URL
fetch(apiUrl + '/endpoint')
.then(response => response.json())
.then(data => console.log(data))
3 配置文件解析 (vite.config.js)
3.1defineConfig
defineConfig 是 Vite 提供的一个辅助函数，用于提供类型提示和自动完成：
import { defineConfig } from 'vite'
export default defineConfig({
// 配置项在这里
})
3.2 常见配置项
server
配置开发服务器相关的选项：
export default defineConfig({
server: {
host: '0.0.0.0', // 指定服务器主机名
port: 3000, // 指定服务器端口
open: true, // 自动打开浏览器
proxy: { // 配置代理
'/api': {
target: 'http://localhost:4000',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
})
build
配置构建选项：
export default defineConfig({
build: {
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 静态资源目录
sourcemap: true, // 生成 sourcemap 文件
rollupOptions: { // 自定义 Rollup 选项
output: {
manualChunks: {
vendor: ['vue']
}
}
}
}
})
resolve
配置模块解析选项：
export default defineConfig({
resolve: {
alias: {
'@': '/src' // 路径别名
},
extensions: ['.js', '.vue', '.json'] // 自动解析的扩展名
}
})
css
配置 CSS 相关选项：
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`
}
},
modules: {
scopeBehaviour: 'local', // 配置 CSS 模块行为
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
})
plugins
配置 Vite 插件：
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()]
})
optimizeDeps
optimizeDeps 选项用于配置依赖预构建的行为。Vite 会扫描你的项目并预构建依赖，以提高开发服务器的启动速度。
export default defineConfig({
optimizeDeps: {
entries: ['index.html'], // 手动指定要扫描的入口文件
exclude: ['your-package'], // 排除不需要预构建的依赖
include: ['another-package'] // 强制预构建某些依赖
}
})
json
json 选项用于配置 JSON 文件的处理方式：
export default defineConfig({
json: {
namedExports: true, // 支持从 JSON 文件导入具名导出
stringify: false // 禁用自动 JSON.stringify 转换
}
})
esbuild
esbuild 选项用于配置内部使用的 esbuild 编译器：
export default defineConfig({
esbuild: {
jsxFactory: 'h', // 自定义 JSX 工厂函数
jsxFragment: 'Fragment', // 自定义 JSX 片段
minify: true // 启用代码压缩
}
})
logLevel
logLevel 选项用于设置日志级别：
export default defineConfig({
logLevel: 'info' // 可选值：'info', 'warn', 'error', 'silent'
})
define
define 选项用于定义全局常量，这些常量会在打包时进行替换：
export default defineConfig({
define: {
__VERSION__: JSON.stringify('1.0.0')
}
})
ssr
ssr 选项用于配置服务器端渲染（SSR）相关的选项：
export default defineConfig({
ssr: {
external: ['react', 'react-dom'], // 指定外部化依赖
noExternal: ['your-package'] // 禁止外部化某些依赖
}
})
4 命令行接口 (CLI)
Vite 提供了一些命令行工具来帮助开发和构建项目。
4.1 启动开发服务器
vite
这将启动一个开发服务器，并打开一个浏览器窗口，你可以在其中查看应用。
或者使用 npm script：
npm run dev
4.2 构建生产版本
vite build
这将构建生产版本的应用，输出到 dist 目录。
或者使用 npm script：
npm run build
4.3 预览构建结果
vite preview
这将启动一个静态文件服务器，用于预览构建结果。
或者使用 npm script：
npm run serve
4.4 CLI 选项
可以通过命令行选项覆盖配置文件中的选项。例如，指定配置文件：
vite --config ./config/vite.config.js
或者指定环境模式：
vite --mode production
4.5 命令行全局安装
你可以将 Vite 安装为全局命令，以便在任何地方使用：
npm install -g vite
安装后，你可以使用 vite 命令来创建、开发和构建项目。
