您正在运行 vue-i18n 的 esm-bundler 构建。建议配置您的捆绑器以显式替换功能标志全局变量

Question

我创建了一个离子应用程序并添加了 vue-i18n。

npx ionic start myapp tabs --type vue
npm install vue-i18n@next

我做了 VueI18n 设置的第一步，并将其添加到“./src/main.ts”：

import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale: 'de',
  fallbackLocale: 'en',
  messages: {en: {testMessage: 'Test message'}, de: {testMessage: 'Testnachricht'}}
});

在npx ionic serve浏览器控制台中收到以下警告后查看结果时：

您正在运行 vue-i18n 的 esm-bundler 构建。建议将您的捆绑器配置为使用布尔文字显式替换功能标志全局变量，以便在最终捆绑包中进行适当的摇树。

我在浏览器控制台中得到了这个信息：

您正在运行 vue-i18n 的开发版本。确保在部署生产时使用生产版本 (*.prod.js)。

当我注释掉添加到“./src/main.ts”的代码段时，两个通知都消失了。所以它们似乎真的是由 vue-i18n 引起的。

问过谷歌后，我仍然不知道如何处理这些通知。他们在告诉我什么？我应该为他们做些什么吗？我可以具体做什么？

这些是在新项目的根文件夹中自动创建的文件：

./ionic.config.json
./cypress.json
./jest.config.js
./babel.config.js
./.gitignore
./package-lock.json
./package.json
./.eslintrc.js
./tsconfig.json
./capacitor.config.json
./.browserslistrc

还请告诉我哪里需要更改。还

$ find . -type f ! -name package-lock.json -maxdepth 1 -exec grep -iH webpack {} \;
./tsconfig.json:      "webpack-env",

因此，如果您告诉我“正确设置 webpack”，我将不知道该怎么办。

Answer 1

vue-i18n为每个捆绑程序提供了如何设置全局功能标志的说明，以便此警告消失

https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags

我正在使用 Vite，我将其添加到vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
    define: {
        __VUE_I18N_FULL_INSTALL__: true,
        __VUE_I18N_LEGACY_API__: false,
        __INTLIFY_PROD_DEVTOOLS__: false,
    },
    // ...
});

Answer 2

此警告仅出现在开发环境中。生产模式还行。

有一个解决方案：https : //github.com/xiaoxian521/CURD-TS/commit/f2db3acee2629ec26bc531a5b0b4be9eaec14dab

Answer 3

现在我使用这种方式导入 i18n，警告消失了

import { createI18n } from 'vue-i18n/index'

Answer 4

npm 我 vue-i18n

import { createI18n } from 'vue-i18n/dist/vue-i18n.cjs'

这在 Vue3 中对我有用。

我的@vue/cli 5.0.3版本。

我的vue-i18n版本是9.2.2.

Answer 5

这显然是一个已知的错误。他们说它将在 9.2 版本中修复。

在此线程中查看更多信息：https://github.com/intlify/vue-i18n-next/issues/391

Answer 6

vite.config.ts

alias: {
    'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
},