兄弟，你是不是刚装完 Vite，敲了几下 npm run dev，结果页面白屏？

别慌，我跟你唠嗑几句，帮你把这套前端工程化的活儿弄明白。

开发时它用了 esbuild 把依赖预编译，秒开。

热geng新靠原生 ESM，改一点儿页面立马刷出来。

生产打包交给 Rollup，插件生态成熟。

哈哈，这三点凑一起，就让老项目的慢慢爬行变成闪电。

.env 文件就像是项目的小秘密本。

根目录随手建几个：

.env                # 公共变量
.env.development    # 开发环境
.env.production     # 生产环境
.env.test           # 测试

记住只有以 VITE_ 开头的才会被客户端kan到。

比如：

VITE_API_BASE_URL=/api
VITE_APP_TITLE=我的 Vite 项目
DB_PASSWORD=这玩意儿不会泄露给前端

代码里直接这样取：

console.log
console.log // development / production

不然你会kan到控制台一直报

别忘了别名 alias，让路径不再乱七八糟

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: ,
  resolve: {
    alias: {
      '@': path.resolve
    }
  },
  // ……后面还有hen多配置
})

tsconfig 那边也得同步：

{
  "compilerOptions": {
    "paths": {
      "@/*": 
    }
  }
}

本地开发经常遇到前端跑在 localhost:5173，后端跑在 localhost:8000，请求被 CORS 拦住。

Vite 的 proxy Neng帮你把 /api 的请求全转过去。

export default defineConfig({
  server: {
    port: 5173,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: path => path.replace
      }
    }
  }
})

const base = import.meta.env.VITE_API_BASE_URL // '/api'
export const fetchUser =  => fetch

打包时我们Ke以手动拆包，让公共库单独抽离出来提高缓存命中率。

build: {
  outDir: 'dist',
  rollupOptions: {
    output: {
      manualChunks: {
        vueVendor: 
      }
    }
  }
}

base: '/my-app/'

环境变量不生效？先检查是否加了 VITE_ 前缀，再kankan dev 服务有没有重启。

代理不走？确认后端服务真的在跑，而且 rewrite 写对了没有多余的斜杠。

别名报错？路径写错、或者 tsconfig 没同步dou是罪魁祸首。

图片、字体找不到？记得在 vite.config.tsbase 配置对应 CDN 或相对路径。

pnpm create vite my-app --template vue-ts
cd my-app
pnpm install
pnpm dev   # 启动开发服务器
pnpm build # 打包生产代码
pnpm preview # 本地预览构建产物