vuei18n-po在Vue项目main.ts中的使用及报错求助

错误原因 #

fs是Node.js专属的文件系统模块，用于读写本地文件，但浏览器环境没有这个模块。你直接在main.ts（客户端代码）中调用vuei18nPo，它内部依赖fs操作文件，自然会触发兼容性报错。

解决方案 #

vuei18n-po的作用是预生成国际化消息文件，这个操作应该放在构建阶段（Node.js环境）执行，而不是在浏览器运行的客户端代码里。具体步骤如下：

1. 创建单独的Node.js生成脚本
   在项目根目录新建scripts/generate-i18n.js文件，把生成逻辑移到这里：

   const vuei18nPo = require('vuei18n-po');
   
   async function generateI18nMessages() {
     await vuei18nPo({
       po: ["django.po", "../../backend/locale/pl/LC_MESSAGES/django.po"],
       messagesFile: "src/generated/allInOne.json", // 输出到src目录，方便客户端引入
       messagesDir: "src/generated",
     });
     console.log('国际化文件生成成功');
   }
   
   generateI18nMessages().catch(err => {
     console.error('国际化文件生成失败:', err);
     process.exit(1);
   });
   

2. 添加npm脚本自动执行生成逻辑
   修改package.json的scripts字段，添加预执行脚本，确保在开发或构建前自动生成文件：

   {
     "scripts": {
       "predev": "node scripts/generate-i18n.js",
       "prebuild": "node scripts/generate-i18n.js",
       "dev": "vite", // 替换成你实际用的开发命令，比如vue-cli-service serve
       "build": "vite build" // 替换成你实际用的构建命令，比如vue-cli-service build
     }
   }
   

   注：pre前缀是npm的钩子脚本，会自动在对应命令前执行，比如运行npm run dev时，会先执行predev。

3. 在Vue项目中引入生成好的文件
   先安装vue-i18n（如果没装的话）：

   npm install vue-i18n@next
   

   然后修改main.ts，引入生成的消息文件并初始化vue-i18n：

   import { createApp } from "vue";
   import { createI18n } from 'vue-i18n';
   import App from "./App.vue";
   import router from "./router";
   import "jquery";
   import "bootstrap";
   import "bootstrap/dist/css/bootstrap.min.css";
   // 引入生成的国际化消息
   import messages from './generated/allInOne.json';
   
   // 初始化i18n
   const i18n = createI18n({
     locale: 'pl', // 设置默认语言
     messages,
   });
   
   const app = createApp(App);
   app.use(router);
   app.use(i18n); // 注册i18n插件
   
   app.mount("#app");
   

关键说明 #

vuei18n-po的定位是构建工具，而非浏览器端运行的插件，它依赖Node.js的文件系统能力来解析.po文件并生成JSON，所以必须在Node环境下执行，不能放到客户端代码中运行。

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