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

Question

我创建了一个 ionic 应用程序并添加了 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 引起的。

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

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

./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

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

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

Answer 2

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 3

npm i vue-i18n

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

这在 Vue3 中对我有用。

我的

@vue/cli 5.0.3

版本。

我的

vue-i18n

版本是

9.2.2

。

Answer 4

vite.config.ts

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

Answer 5

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

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

Answer 6

我在旧包的控制台中收到了相同的警告。然后我将项目更新为“vue-i18n”：“^9.2.0-beta.15”，就可以了。

首先安装 vue-18n 到最新包（^9.2.0-beta.15）：

npm i --save vue-i18n@next

然后： 我在与 i18n.ts

相同的路径上创建了

main.ts

文件

import { createI18n, LocaleMessages, LocaleMessageValue, VueMessageType } from 'vue-i18n';

/**
 * Load locale messages
 *
 * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
 * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
 */
function loadLocaleMessages(): LocaleMessages<Record<string, LocaleMessageValue<VueMessageType>>> {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages: LocaleMessages<Record<string, LocaleMessageValue<VueMessageType>>> = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key).default;
    }
  });
  return messages;
}

const setDateTimeFormats = {
  short: {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  },
  long: {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long',
    hour: 'numeric',
    minute: 'numeric',
  },
};

const dateTimeFormats = {
  en: setDateTimeFormats,
  es: setDateTimeFormats,
  de: setDateTimeFormats,
  'en-GB': setDateTimeFormats,
};

export default createI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'tr',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
  dateTimeFormats,
});

还有我的

main.ts

文件：

import i18n from './i18n';
app.use(i18n).use(store).use(router).mount('body');

Answer 7

我正在使用Vue-cli，在这个解决方案之后我解决了同样的问题，试试吧！ vue.config.js 中的配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  **chainWebpack: config => {
    config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
  }**
})

Answer 8

Nuxt 3（“nuxt”：“3.0.0-rc.12”）与 Vite 的解决方案。
以防万一：
（如果您在启动服务器时看到“Vite client Warmed up in ...ms”，您就知道您的 Nuxt 应用程序使用了 Vite） 关于配置构建工具： https://v3.nuxtjs.org/migration/bundling/

yourApp/nuxt.config.ts：

 export default defineNuxtConfig({
    vite: {
        define: {
            __VUE_I18N_FULL_INSTALL__: true,
            __VUE_I18N_LEGACY_API__: false,
            __INTLIFY_PROD_DEVTOOLS__: false,
        },
    }
})

Answer 9

我有

[email protected]

。这个版本有一个错误。当然我们可以更新到

9.2.2

（目前最新的），但这需要Vue 3.2+才有effectScope。要使用 Vue 3.2 应用程序还需要当前的 Typescript 版本。所以我们坚持

9.1.10

并添加了一些代码到

vue.config.js

module.exports = {
//...
   chainWebpack: (config) =>
    config.plugin("feature-flags").tap((args) => {
      args[0].__VUE_I18N_FULL_INSTALL__ = JSON.stringify(true);
      args[0].__VUE_I18N_LEGACY_API__ = JSON.stringify(false);
      return args;
   }),
};

在我的例子中，这些操作对警告进行了排序。

Answer 10

将

vue-i18n

和

@intlify/vite-plugin-vue-i18n

更新为

next

版本。

npm i vue-i18n@next
npm i --save-dev @intlify/vite-plugin-vue-i18n@next