vite typescript项目生产环境静态资源路径配置核心是正确设置base选项并匹配资源引用方式：base决定所有静态资源根路径前缀，开发不生效；按部署场景选'/'、'/subpath/'、'./'或cdn地址；src下资源用相对导入，public下用绝对路径'/xxx'；推荐用环境变量动态配置base及cdn分资源托管。
Vite 在 TypeScript 项目中配置生产环境静态资源打包路径，核心在于控制 base 选项和资源引用方式，确保 JS、CSS、图片等资源在部署后能被正确加载。关键不是“改路径”，而是让构建产物知道从哪里找资源。
明确 base 配置是根本
base 决定了所有静态资源（如 <script></script>、<link>、<img>、import() 动态导入）的根路径前缀。它只在生产构建时生效，开发服务器不走这个逻辑。
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
base: './', // ✅ 推荐：相对路径，适配任意子目录或本地文件系统
// base: '/my-app/', // ? 若部署到 https://domain.com/my-app/
// base: 'https://cdn.example.com/', // ☁️ 若全部静态资源托管在 CDN
plugins: [vue()]
})
按部署场景选对 base 值
- 部署到域名根目录（如
https://example.com）→base: '/'（默认值，可省略） - 部署到子目录（如
https://example.com/admin）→base: '/admin/' - 部署位置不确定（如测试环境、CDN、本地双击打开 HTML）→
base: './' - 所有静态资源走 CDN →
base: 'https://cdn.example.com/'
配合环境变量实现动态 base（推荐进阶用法）
避免硬编码，用 .env.production 统一管理：
# .env.production VITE_BASE_URL=https://cdn.example.com
// vite.config.ts
const isProduction = process.env.NODE_ENV === 'production'
const base = isProduction
? process.env.VITE_BASE_URL || './'
: '/'
export default defineConfig({ base })
静态资源引用要与 base 匹配
- ✅ 放在
src/下的图片、字体等：用相对路径导入（TypeScript + Vite 会自动处理）// 正确：构建时自动拼接 base import logo from '@/assets/logo.png' @@##@@
- ✅ 放在
public/下的资源：直接用绝对路径/xxx（注意：/指向public/根，且构建后public内容平铺到dist/，所以/favicon.ico仍有效） - ❌ 避免混用：不要在
src/中写src="/public/logo.png"，也不要在public/中用./logo.png（可能失效）
额外建议：CDN 分离图片等大资源
若只想把图片等托管 CDN，而非全部资源：
# .env.production VITE_IMG_CDN=https://img.example.com
// 类型声明（vite-env.d.ts）
interface ImportMetaEnv {
readonly VITE_IMG_CDN: string
}
// 组件中使用
@@##@@
这样，JS/CSS 走主站或 CDN（由 base 控制），图片单独走图片 CDN，更灵活。
