在使用 Vite 结合 Vue 3 进行项目开发时,vite.config.js
配置文件起着重要的作用。
配置项和示例:
import {
defineConfig } from 'vite';
import vue from '@vitejs/plugin/vue';
export default defineConfig({
plugins: [vue()],
server: {
// 服务器配置
port: 8080,
open: true,
},
build: {
// 构建配置
outDir: 'dist',
assetsDir: 'assets',
minify: 'esbuild',
sourcemap: true,
},
resolve: {
// 解析配置
alias: {
'@': '/src',
},
},
});
一、服务器配置
port
:指定服务器运行的端口号。open
:在启动服务器后自动打开浏览器。
二、构建配置
outDir
:指定构建输出的目录。assetsDir
:指定静态资源的输出目录。minify
:选择压缩工具,如esbuild
或terser
。sourcemap
:是否生成源文件映射,方便调试。
三、解析配置
alias
:设置路径别名,方便项目中的路径引用。
除此之外,还可以根据项目需求进行其他配置,比如添加自定义的 CSS 预处理插件、设置环境变量等。