Vue 3 + vue-i18n-next：我做错了啥？

Posted 2023-02-23

【中文标题】Vue 3 + vue-i18n-next：我做错了啥？

【英文标题】：Vue 3 + vue-i18n-next: what am I doing wrong?Vue 3 + vue-i18n-next：我做错了什么？

【发布时间】：2021-04-01 15:25:30

【问题描述】：

我已经启动了一个 Vue 3 项目（目前只是一个带有 TypeScript 的样板）并尝试将 i18n 添加到其中。

据我所知，vue-i18n 不能在 Vue 3 中正常工作；但是 vue-i18n-next 应该。

这是我的 main.ts

import  createApp  from "vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import  createI18n  from 'vue-i18n'
import App from "./App.vue";

//import en from "./locale/en.json"
//import ru from "./locale/ru.json"

const messages = 
    en: 
        message: 
            hello: 'hello world'
        
    ,
    ru: 
        message: 
            hello: 'Таки здравствуйте'
        
    


const i18n = createI18n(
    locale: 'ru',
/*    messages: 
        en,
        ru
        ,*/
    messages,
    fallbackLocale: 'en'
)

const app = createApp(App)
    .use(store)
    .use(router)
    .use(i18n);
    .mount("#app");

这是我的 App.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <div> $t("message.hello") </div>
  <router-view />
</template>

但是，我收到了警告

[intlify] The message format compilation is not supported in this build. Because message compiler isn't included. You need to pre-compilation all message format. So translate function return 'message.hello'.

确实，我已经找到并安装了@intlify/message-compiler - 但不知道如何使用它。

我的 webpack.config.js 取自示例

const path = require("path");
module.exports = 
  rules: [
    
      test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
      type: "javascript/auto",
      loader: "@intlify/vue-i18n-loader",
      include: [
        // Use `Rule.include` to specify the files of locale messages to be pre-compiled
        path.resolve(__dirname, "./src/locale"),
      ],
    ,
  ],
;

我的 vue.config.js 看起来很简单

module.exports = 
  chainWebpack: (config) => 
    config.plugin("html").tap((args) => 
      args[0].template = "./resources/index.html";
      return args;
    );
  ,
  configureWebpack: 
    devServer: 
      watchOptions: 
        ignored: ["/node_modules/", "/public/", "**/.#*"],
      ,
    ,
  ,
  parallel: true,
  devServer: 
    disableHostCheck: true,
    public: process.env.DEV_PUBLIC ?? "mlb.ru",
    port: process.env.DEV_PORT ?? 8080,
  ,
;

我什至发现我的消息已经被编译成包。

也许有人在 vue-18n-next 或其他针对 Vue 3 的 i18n 解决方案方面取得了成功？

【参考方案1】：

repo 和文档已移动：

https://github.com/intlify/vue-i18n-next 我尝试了一个非常相似的代码，并且 import createI18n from 'vue-i18n' 只要你在 vue-i18n@9.0.0-beta.16

... [code]

import  createI18n  from 'vue-i18n'

const messages = 
  es: 
    message: 
      value: 'Hola Español.',
    ,
  ,
  en: 
    message: 
      value: 'Hello English.',
    ,
  ,


const i18n = createI18n(
  locale: 'es',
  messages,
)

app
  .use(i18n)
  .mount('#app')

[code] ...

【参考方案2】：

与 Vue 本身一样，i18n 包也有各种版本。像 Vue 一样，它们有一个带有和不带有运行时编译器的版本。来自the docs：

vue-i18n.esm-bundler.js：包括运行时编译器。如果您正在使用捆绑器但仍希望编译语言环境消息（例如通过内联 JavaScript 字符串的模板），请使用此选项

您收到的警告显然是告诉您需要此编译器版本。文档对此不太清楚，但您需要将导入指向包的运行时编译器版本，如下所示：

import  createI18n  from "vue-i18n/dist/vue-i18n.esm-bundler.js";

【讨论】：

当然可以。我只希望有一天它会被记录下来......

【参考方案3】：

我在外部文件 (i18n.js) 中使用 i18n，希望对您有所帮助。

i18n.js

import  createI18n  from 'vue-i18n'
const messages = 
    en: 
        message: 
            hello: 'hello world'
        
    ,
    ru: 
        message: 
            hello: 'Таки здравствуйте'
        
    

const i18n = createI18n(
    locale: 'en',
    messages
)
export default i18n

ma​​in.js

import  createApp  from 'vue'
import App from './App.vue'
import i18n from "@/i18n"
const app = createApp(App)
app.use(i18n)
app.mount('#app')

App.vue

<template>
    <span><div> $t("message.hello") </div></span>
</template>