Vue.js: Vite 工程化配置

# Webpack 项目冷启动
$ npm run dev
> Project is running at http://localhost:8080
> Compiled successfully in 28.5s  ← 等了 30 秒

# Vite 项目冷启动
$ npm run dev
> VITE v5.4.0  ready in 487 ms  ← 仅 0.5 秒
> Local: http://localhost:5173/

开发模式（dev）：
  - 用原生 ESM，浏览器直接 import
  - 按需编译（首次访问页面才编译）
  - HMR 极快（只更新改动的模块）

生产模式（build）：
  - 用 Rollup 打包
  - 自动 tree-shaking / 代码分割 / 压缩
  - 输出到 dist/ 目录

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  // 项目根目录（默认 process.cwd()）
  root: '.',
  
  // 基础公共路径
  base: '/',
  
  // 插件
  plugins: [vue()],
  
  // 服务器配置
  server: {
    port: 5173,
    open: true,  // 自动打开浏览器
    host: '0.0.0.0'  // 局域网可访问
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'esbuild'
  },
  
  // CSS 配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
  
  // 路径别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

export default defineConfig({
  // 1. 路径别名（最常用）
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@stores': path.resolve(__dirname, 'src/stores')
    }
  },
  
  // 2. 服务器配置
  server: {
    port: 5173,
    open: true,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  },
  
  // 3. CSS 预处理器
  css: {
    preprocessorOptions: {
      scss: { /* ... */ },
      less: { /* ... */ }
    }
  },
  
  // 4. 构建优化
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia']
        }
      }
    },
    chunkSizeWarningLimit: 1500
  },
  
  // 5. 优化选项
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia']
  }
})

# .env.development
VITE_API_BASE_URL=http://localhost:3000
VITE_APP_TITLE=My App (Dev)

# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=My App

# .env.local（git 忽略，每个开发者自己的）
VITE_API_KEY=secret-key

// src/env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_APP_TITLE: string
  readonly VITE_API_KEY?: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

const apiUrl = import.meta.env.VITE_API_BASE_URL
const title = import.meta.env.VITE_APP_TITLE

npm install -D sass

// src/styles/variables.scss
$primary: #42b883;
$danger: #ef4444;
$font-size-base: 14px;
$border-radius: 4px;

// vite.config.ts
css: {
  preprocessorOptions: {
    scss: {
      // 自动导入到每个 .scss 文件
      additionalData: `@import "@/styles/variables.scss";`
    }
  }
}

// 任何 .scss 文件中都能直接用
.button {
  background: $primary;  /* 无需 @import */
  color: white;
  border-radius: $border-radius;
}

npm install -D unplugin-auto-import

// vite.config.ts
import AutoImport from 'unplugin-auto-import'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts',  // 类型定义
      eslintrc: {
        enabled: true  // 生成 .eslintrc-auto-import.json
      }
    })
  ]
})

<script setup>
// ✅ 不再需要 import ref / computed / watch
const count = ref(0)
const double = computed(() => count.value * 2)
watch(count, (val) => console.log(val))

// ✅ 不再需要 useRouter
const router = useRouter()
</script>

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vue-vendor': ['vue', 'vue-router', 'pinia'],
        'echarts-vendor': ['echarts', 'vue-echarts'],
        'utils': ['axios', 'dayjs']
      }
    }
  }
}

build: {
  rollupOptions: {
    treeshake: {
      moduleSideEffects: 'no-external',  // 标记所有模块无副作用
      propertyReadSideEffects: false     // 标记属性读取无副作用
    }
  }
}

build: {
  cssMinify: 'lightningcss',  // 比 esbuild 快 10x
  // 或 'esbuild'（默认）
}

build: {
  assetsInlineLimit: 4096,  // < 4KB 资源 inline（base64）
  rollupOptions: {
    output: {
      assetFileNames: 'assets/[name]-[hash][extname]',
      chunkFileNames: 'js/[name]-[hash].js',
      entryFileNames: 'js/[name]-[hash].js'
    }
  }
}

build: {
  sourcemap: true,  // 生产环境也生成（用于 Sentry）
  rollupOptions: {
    output: {
      sourcemapExcludeSources: true  // 不把源码 inline 到 map
    }
  }
}

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')   // @ → src/
    }
  },

  server: {
    port: 5173, open: true,                 // 启动后自动打开
    proxy: {
      '/api': {
        target: 'http://localhost:3000',    // 代理转发
        changeOrigin: true
      }
    }
  },

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/variables.scss";'
      }
    }
  },

  build: {
    outDir: 'dist', sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: { 'vue-vendor': ['vue', 'vue-router', 'pinia'] }
      }
    }
  }
})

# .env.development （开发）
VITE_API_BASE_URL=http://localhost:3000

# .env.production （生产）
VITE_API_BASE_URL=https://api.example.com

# .env.local （本地，不入 Git）
VITE_API_KEY=secret

// src/env.d.ts（TypeScript 声明）
interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_API_KEY?: string
}

// 在 .vue / .ts 中使用
const apiUrl = import.meta.env.VITE_API_BASE_URL