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

文章目录

- 一、安装依赖
- [二、vite.config.ts（Vite6 专用，兼容最新规范）](#二、vite.config.ts（Vite6 专用，兼容最新规范）)
- [三、tsconfig.json （适配别名+Vite6）](#三、tsconfig.json （适配别名+Vite6）)
- 四、tsconfig.node.json
- 五、环境变量文件示例
- [六、package.json scripts](#六、package.json scripts)
- [七、关键说明（Vite6 专属要点）](#七、关键说明（Vite6 专属要点）)

一、安装依赖

bash 复制代码

# 核心
npm install vite vue @vitejs/plugin-vue -D
# TS 类型支持
npm install typescript vue-tsc @vue/tsconfig -D
# 路径别名需要
npm install @types/node -D

二、vite.config.ts（Vite6 专用，兼容最新规范）

typescript 复制代码

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // 读取环境变量，Vite6 推荐写法
  const env = loadEnv(mode, process.cwd(), '')
  const isBuild = 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) => {
            const ext = 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）

json 复制代码

{
  "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

json 复制代码

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "compilerOptions": {
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

五、环境变量文件示例

.env（公共基础变量）

env 复制代码

VITE_APP_TITLE=Vite6项目

.env.development（开发环境）

env 复制代码

VITE_API_BASE_URL=http://localhost:8080/api

.env.production（生产环境）

env 复制代码

VITE_API_BASE_URL=https://api.xxx.com

六、package.json scripts

json 复制代码

"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内添加：

ts 复制代码

build: {
  rollup: 'rolldown'
}

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