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

文章目录一、安装依赖二、vite.config.tsVite6 专用兼容最新规范三、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# 路径别名需要npminstalltypes/node-D二、vite.config.tsVite6 专用兼容最新规范import{defineConfig,loadEnv}fromviteimportvuefromvitejs/plugin-vueimport{resolve}frompath// https://vitejs.dev/config/exportdefaultdefineConfig(({command,mode}){// 读取环境变量Vite6 推荐写法constenvloadEnv(mode,process.cwd(),)constisBuildcommandbuildreturn{plugins:[vue()],// 1. 路径别名 指向 srcresolve:{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){constextassetInfo.name?.split(.).pop()if(/css/.test(ext!))returncss/[name]-[hash].cssif(/png|jpe?g|svg|gif|tiff|bmp|ico/.test(ext!))returnimg/[name]-[hash].[ext]returnassets/[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_TITLEVite6项目.env.development开发环境VITE_API_BASE_URLhttp://localhost:8080/api.env.production生产环境VITE_API_BASE_URLhttps://api.xxx.com六、package.json scriptsscripts:{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 不会报路径找不到。