能否在Vue应用中使用LinguiJS？使用遇问题求助

LinguiJS完全支持Vue.js应用，你遇到的问题是因为默认配置未适配Vue单文件组件的结构，以下是针对性解决方法：

问题1：npm run extract忽略.vue文件 #

Lingui CLI默认只扫描.js/.jsx等文件，需要修改配置让它识别.vue文件，并正确解析Vue单文件组件中的翻译内容：

1. 首先安装Vue专属的Lingui包：

   npm install @lingui/vue --save
   

2. 在项目根目录创建或修改lingui.config.js，添加.vue文件的匹配规则，并配置Babel解析Vue的语法：

   module.exports = {
     locales: ["en", "zh"],
     sourceLocale: "en",
     catalogs: [
       {
         path: "<rootDir>/src/locales/{locale}/messages",
         include: ["src/**/*.{js,vue}"], // 新增.vue文件匹配规则
       },
     ],
     format: "po",
     babel: {
       parserPlugins: ["jsx", "decorators-legacy", "classProperties", "vue"], // 添加Vue语法解析插件
     },
   };
   

3. 确保Vue单文件组件中的翻译逻辑符合要求：

   • 在<script>标签内使用Lingui的翻译函数（如t、plural）
   • 在<template>中使用Lingui提供的<Trans>组件

   <template>
     <div>
       <Trans>Hello World</Trans>
     </div>
   </template>
   
   <script>
   import { Trans } from "@lingui/vue";
   
   export default {
     components: { Trans },
   };
   </script>
   

问题2：npm run serve出现模块错误 #

这类错误通常是依赖缺失或Babel/构建配置未正确适配Lingui导致的：

1. 检查并安装所有必要依赖：

   npm install @lingui/core @lingui/cli @lingui/vue babel-plugin-lingui-transform-js --save-dev
   

2. 修改babel.config.js，添加Lingui的转换插件：

   module.exports = {
     presets: ["@vue/cli-plugin-babel/preset"],
     plugins: ["babel-plugin-lingui-transform-js"],
   };
   

3. 在vue.config.js中添加transpileDependencies配置，确保Lingui的包被正确转译：

   module.exports = {
     transpileDependencies: ["@lingui/core", "@lingui/vue"],
   };
   

4. 在src/main.js中初始化Lingui的国际化实例并挂载到Vue：

   import Vue from "vue";
   import App from "./App.vue";
   import { i18n } from "@lingui/core";
   import { I18nProvider } from "@lingui/vue";
   // 导入生成的语言包
   import enMessages from "./locales/en/messages";
   import zhMessages from "./locales/zh/messages";
   
   i18n.load({
     en: enMessages,
     zh: zhMessages,
   });
   i18n.activate("zh"); // 设置默认语言
   
   Vue.config.productionTip = false;
   
   new Vue({
     render: (h) =>
       h(I18nProvider, {}, { default: () => h(App) }),
   }).$mount("#app");
   

完成以上配置后，重新执行npm run extract应该就能扫描到.vue文件中的翻译内容，npm run serve也不会再出现模块错误。

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