Vue 3 + vue-i18n-next:我做错了啥?
Posted
技术标签:
【中文标题】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
main.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>
【讨论】:
以上是关于Vue 3 + vue-i18n-next:我做错了啥?的主要内容,如果未能解决你的问题,请参考以下文章