文章目录
- 一、安装依赖
- 二、vite.config.ts（Vite6 专用，兼容最新规范）
- 三、tsconfig.json （适配别名+Vite6）
- 四、tsconfig.node.json
- 五、环境变量文件示例
- .env（公共基础变量）
- .env.development（开发环境）
- .env.production（生产环境）
- 六、package.json scripts
- 七、关键说明（Vite6 专属要点）
![]()
一、安装依赖
# 核心npminstallvite vue @vitejs/plugin-vue-D# TS 类型支持npminstalltypescript vue-tsc @vue/tsconfig-D# 路径别名需要npminstall@types/node-D
二、vite.config.ts（Vite6 专用，兼容最新规范）
import{defineConfig,loadEnv}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'// https://vitejs.dev/config/exportdefaultdefineConfig(({command,mode})=>{// 读取环境变量，Vite6 推荐写法constenv=loadEnv(mode,process.cwd(),'')constisBuild=command==='build'return{plugins:[vue()],// 1. 路径别名（@ 指向 src）resolve:{alias:{'@':resolve(__dirname,'src'),},// Vite6 默认解析条件，无需改动conditions:['module','browser']},// 本地开发服务server:{host:'0.0.0.0',port:3000,open:true,proxy:{}// 可自行配置跨域代理},// 构建打包核心配置build:{outDir:'dist',emptyOutDir:true,// 2. CSS 压缩 + 拆分单独css文件cssCodeSplit:true,cssMinify:isBuild?'esbuild':false,// 3. 分包策略（vendor第三方包单独打包）rollupOptions:{output:{// 静态资源分类打包chunkFileNames:'js/[name]-[hash].js',entryFileNames:'js/[name]-[hash].js',assetFileNames:(assetInfo)=>{constext=assetInfo.name?.split('.').pop()if(/css/.test(ext!))return'css/[name]-[hash].css'if(/png|jpe?g|svg|gif|tiff|bmp|ico/.test(ext!))return'img/[name]-[hash].[ext]'return'assets/[name]-[hash].[ext]'},// 第三方依赖分包manualChunks:{vue:['vue','vue-router','pinia']}}},// 关闭sourcemap 生产环境sourcemap:false,// 限制单文件大小警告chunkSizeWarningLimit:1000},// 环境变量前缀，默认VITE_envPrefix:'VITE_'}})
三、tsconfig.json （适配别名+Vite6）
{"extends":"@vue/tsconfig/tsconfig.web.json","compilerOptions":{"target":"ES2020","useDefineForClassFields":true,"module":"ESNext","lib":["ES2020","DOM","DOM.Iterable"],"skipLibCheck":true,/* 路径别名映射 */"baseUrl":".","paths":{"@/*":["src/*"]},"moduleResolution":"bundler","allowImportingTsExtensions":true,"resolveJsonModule":true,"isolatedModules":true,"noEmit":true,"jsx":"preserve","strict":true,"noUnusedLocals":true,"noUnusedParameters":true,"noFallthroughCasesInSwitch":true},"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"],"references":[{"path":"./tsconfig.node.json"}]}
四、tsconfig.node.json
{"extends":"@vue/tsconfig/tsconfig.node.json","compilerOptions":{"skipLibCheck":true,"module":"ESNext","moduleResolution":"bundler","allowSyntheticDefaultImports":true},"include":["vite.config.ts"]}
五、环境变量文件示例
.env（公共基础变量）
VITE_APP_TITLE=Vite6项目
.env.development（开发环境）
VITE_API_BASE_URL=http://localhost:8080/api
.env.production（生产环境）
VITE_API_BASE_URL=https://api.xxx.com
六、package.json scripts
"scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"}
七、关键说明（Vite6 专属要点）
- 不再需要手动引入
splitVendorChunkPlugin，改用rollupOptions.manualChunks分包； - Sass 若使用旧写法报错，在
css.preprocessorOptions.sass.api: "legacy"临时兼容； - 插件必须为 ESM 格式，
module.exports插件会直接失效； - 如需开启Rolldown极速打包，在build内添加：
build:{rollup:'rolldown'}
- 别名
@同时配置 Vite + TS 两处，TS 不会报路径找不到。
