Vite6 + Vue3 + TS 完整版标准配置模板

文章目录

• • 一、安装依赖
  • 二、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 专属要点）

1. 不再需要手动引入splitVendorChunkPlugin，改用rollupOptions.manualChunks分包；
2. Sass 若使用旧写法报错，在css.preprocessorOptions.sass.api: "legacy"临时兼容；
3. 插件必须为 ESM 格式，module.exports插件会直接失效；
4. 如需开启Rolldown极速打包，在build内添加：

build:{rollup:'rolldown'}

5. 别名@同时配置 Vite + TS 两处，TS 不会报路径找不到。