Vite 构建工具

// Webpack: 启动时打包所有文件
Entry → ModuleA → ModuleB → ModuleC → ...
     → ModuleD → ModuleE → ...
     → ModuleF → ModuleG → ModuleH → ...
                                    ↓
                            bundle.js (3MB)
                                    ↓
                            启动 dev server  ← 要等几十秒

// Vite: 浏览器请求什么，才编译什么
浏览器请求 index.html
  → 加载 main.js
    → import Dashboard.vue  ← 只编译这一个文件
    → import api.js         ← 只编译这一个文件

启动时间：~300ms  ← 不管项目多大

# 创建 Vite 项目（交互式选择框架）
$ npm create vite@latest my-dashboard

# 或者直接指定模板
$ npm create vite@latest my-dashboard -- --template vue
$ npm create vite@latest my-dashboard -- --template react

$ cd my-dashboard
$ npm install
$ npm run dev

{
  "name": "my-dashboard",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",              // 开发服务器（热更新）
    "build": "vite build",      // 生产构建（输出到 dist/）
    "preview": "vite preview"   // 本地预览生产构建
  }
}

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

// https://vitejs.dev/config/
export default defineConfig({
  // ① 插件 —— 扩展 Vite 能力
  plugins: [
    vue(),  // 让 Vite 能解析 .vue 文件
  ],

  // ② 开发服务器配置
  server: {
    port: 3000,           // 改为 3000 端口（默认 5173）
    open: true,            // 启动时自动打开浏览器

    // ③ API 代理 —— 解决跨域问题
    proxy: {
      // 前端请求 /api/machine/status
      // → 自动转发到 http://localhost:8080/api/machine/status
      '/api': {
        target: 'http://localhost:8080',  // 后端服务地址
        changeOrigin: true,   // 修改请求头中的 Origin
        // rewrite: (path) => path.replace(/^\/api/, '')
        // ↑ 如果后端接口没有 /api 前缀，取消注释
      },
    },
  },

  // ④ 路径别名 —— 简化 import 路径
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      // 使用前：import Dashboard from '../../../components/Dashboard.vue'
      // 使用后：import Dashboard from '@/components/Dashboard.vue'
    },
  },

  // ⑤ 生产构建优化
  build: {
    outDir: 'dist',            // 输出目录
    sourcemap: false,         // 生产环境不生成 sourcemap
    chunkSizeWarningLimit: 1000, // chunk 大小警告阈值（KB）
    rollupOptions: {
      output: {
        // 分包策略 —— 按依赖拆分，利用浏览器缓存
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'echarts-vendor': ['echarts'],
        },
      },
    },
  },
})

// 开发环境中，请求会经过 Vite 代理

// 前端发起：
fetch('/api/machine/status')
// 实际请求 → http://localhost:8080/api/machine/status

// 另一个例子：获取 OEE 数据
fetch('/api/oee/realtime?line=L1')
// 实际请求 → http://localhost:8080/api/oee/realtime?line=L1

// ❌ 没有别名 —— 相对路径地狱
import Dashboard from '../../../components/Dashboard.vue'
import { getOEE } from '../../api/oee'
import formatTime from '../../utils/format'

// ✅ 有别名 @ → src/
import Dashboard from '@/components/Dashboard.vue'
import { getOEE } from '@/api/oee'
import formatTime from '@/utils/format'

$ npm run dev

$ npm run build

// utils.js — 导出了 3 个函数
export function formatTime(t) { /* ... */ }
export function parseData(d) { /* ... */ }
export function generateReport(r) { /* ... 500行 ... */ }

// Dashboard.vue — 只用了 2 个
import { formatTime, parseData } from '@/utils'

// 生产构建时：
// generateReport 被自动删除（摇掉了）
// 结果：打包体积减小，加载速度更快

# 方式一：交互式选择 Vue
$ npm create vite@latest factory-dashboard -- --template vue

# 方式二：使用 Vue 官方脚手架（内含更多预设）
$ npm create vue@latest factory-dashboard

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

<template>
  <div class="dashboard">
    <h1>产线实时监控</h1>
    <OEEChart :line-id="'L1'" />
    <MachineStatus />
  </div>
</template>

<script setup>
import OEEChart from '@/components/OEEChart.vue'
import MachineStatus from '@/components/MachineStatus.vue'
</script>

# 使用 JavaScript 模板
$ npm create vite@latest factory-dashboard -- --template react

# 使用 TypeScript 模板
$ npm create vite@latest factory-dashboard -- --template react-ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

import { useState } from 'react'
import OEEChart from '@/components/OEEChart'
import MachineStatus from '@/components/MachineStatus'

function App() {
  const [lineId, setLineId] = useState('L1')

  return (
    <div className="dashboard">
      <h1>产线实时监控</h1>
      <OEEChart lineId={lineId} />
      <MachineStatus />
    </div>
  )
}

export default App

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import compression from 'vite-plugin-compression'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    // ① Vue 支持
    vue(),

    // ② Gzip 压缩
    compression({
      algorithm: 'gzip',
      threshold: 10240,  // 大于 10KB 的文件才压缩
    }),

    // ③ 打包分析（构建后生成 stats.html）
    visualizer({
      open: true,        // 构建完自动打开分析页面
      filename: 'stats.html',
    }),
  ],
})

$ npm install -D vite-plugin-compression rollup-plugin-visualizer