Vite 8.0.1中shared选项'define'在构建模式下未按文档预期生效的问题求助

我之前迁移Vue项目到Vite时也踩过几乎一模一样的坑，结合你的配置和Vite 8的特性，主要问题出在两个容易忽略的细节上，咱们一步步拆解解决：

核心原因1：错误用globalThis访问静态替换变量 #

Vite的define选项做的是编译时静态字符串替换——它会在构建阶段把代码里的__APP_VERSION__直接替换成你定义的字符串，而不是把变量挂载到globalThis这类全局对象上。

开发模式下Vite有热更新的特殊兼容处理，让globalThis.__APP_VERSION__能临时生效，但构建时就会出问题：globalThis.__APP_VERSION__会被替换成globalThis."1.0.0"，这是语法错误，最终被JS引擎解析为undefined。

修复方法： #

直接在代码里使用__APP_VERSION__，去掉globalThis：

// ApplicationStore.ts 修正后
state: () => ({
  ...
  appVersion: __APP_VERSION__, // 移除globalThis前缀
}),

核心原因2：define配置位置错误 #

Vite 8中，define是顶层配置项，如果不小心把它嵌套到build或server配置块里，就会出现「开发模式生效、构建模式失效」的情况——开发模式读取server相关配置，构建模式读取build，只有顶层的define才是全局生效的。

正确的配置位置： #

// vite.config.ts 修正后
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import packageJson from './package.json';

export default defineConfig({
  // 把define放在配置顶层，不要嵌套在build里
  define: {
    __APP_VERSION__: JSON.stringify(packageJson.version),
  },
  plugins: [vue()],
  // 其他配置...
});

额外验证步骤 #

1. 重新运行npm run build，打开构建后的产物文件（比如dist/assets/index*.js），搜索__APP_VERSION__，应该已经被替换成"1.0.0"了。
2. 确认vite-env.d.ts的类型声明被TypeScript识别，检查tsconfig.json的include数组是否包含该文件：

{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "vite-env.d.ts"]
}

更贴合Vite生态的替代方案：用import.meta.env #

如果想避开静态替换的潜在问题，建议用Vite官方推荐的import.meta.env注入版本号：

1. 在vite.config.ts中配置：

export default defineConfig({
  define: {
    'import.meta.env.APP_VERSION': JSON.stringify(packageJson.version),
  },
});

2. 在代码中直接使用：

// ApplicationStore.ts
state: () => ({
  appVersion: import.meta.env.APP_VERSION,
}),

3. 可选：在vite-env.d.ts添加类型声明，让TypeScript更友好：

interface ImportMetaEnv {
  readonly APP_VERSION: string;
}
interface ImportMeta {
  readonly env: ImportMetaEnv;
}

内容的提问来源于stack exchange，提问作者BbMajor