Vue I18n报错：无法读取undefined的VITE_DEFAULT_LOCALE属性

排查步骤与解决方案 #

• 检查.env文件的位置和命名

  • 必须放在项目根目录，不能嵌套在src或其他子文件夹下
  • 文件名严格为.env（开发环境可使用.env.development，生产环境用.env.production）
  • 确认编辑器未隐藏以.开头的隐藏文件，且文件未被.gitignore规则排除

• 重启开发服务器
  Vite仅在启动阶段加载环境变量，修改.env文件后必须重启npm run dev，否则新配置不会生效

• 验证环境变量加载状态
  在main.js中添加打印语句，确认import.meta.env是否包含目标变量：

  // main.js
  console.log('当前环境变量：', import.meta.env)
  

  启动项目后查看控制台，如果没有VITE_开头的变量，说明环境变量未正确加载，回到第一步重新检查

• 调整i18n初始化时机
  如果i18n/index.js在Vite环境初始化前被加载，会导致import.meta.env未定义。可以将i18n初始化逻辑移到main.js中：

  // main.js
  import { createApp } from 'vue'
  import App from './App.vue'
  import { createI18n } from 'vue-i18n'
  
  const i18n = createI18n({
    locale: import.meta.env.VITE_DEFAULT_LOCALE,
    fallbackLocale: import.meta.env.VITE_FALLBACK_LOCALE,
    legacy: false,
    messages: {
      en: { /* 英文翻译内容 */ },
      ru: { /* 俄文翻译内容 */ },
      uz: { /* 乌兹别克语翻译内容 */ }
    }
  })
  
  createApp(App).use(i18n).mount('#app')
  

• 检查Vite配置的envDir项
  如果自定义了vite.config.js中的envDir，需确保.env文件放在对应目录下。例如：

  // vite.config.js
  export default defineConfig({
    envDir: './config' // 此时.env需放在项目根目录的config文件夹内
  })
  

• 清除Vite缓存
  删除项目根目录下的node_modules/.vite文件夹，重新执行npm install和npm run dev，排除缓存导致的异常

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