您正在运行vue-i18 n的esm-bundler内部版本,建议将您的bundler配置为将功能标记全局变量显式替换为

9fkzdhlc 于 2022-11-17 发布在 Vue.js

关注(0)|答案(8)|浏览(525)

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

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

我完成了VueI 18 n设置的第一步，并将以下内容添加到“./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-i18 n的esm-bundler内部版本。建议将bundler配置为使用布尔文字显式替换特性标志全局值，以便在最终bundle中获得正确的树摇动。
我在浏览器控制台中得到以下信息：
您正在运行vue-i18 n的开发内部版本。请确保在为生产进行部署时使用生产内部版本（*. prod.js）。
当我注解掉添加到.“/src/main.ts”中的代码片段时，两个通知都消失了。所以它们看起来确实是由vue-i18 n引起的。
问过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正确”。

vue.js

来源：https://stackoverflow.com/questions/66140411/you-are-running-the-esm-bundler-build-of-vue-i18n-it-is-recommended-to-configur

8条答案

按热度按时间

xkftehaa1#

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

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

赞(0）回复(0）举报 2022-11-17

fxnxkyjh2#

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,
    },
    // ...
});

赞(0）回复(0）举报 2022-11-17

ajsxfq5m3#

这显然是一个已知的bug。他们说会在9. 2版本中修复。
查看此主题中的更多信息：https://github.com/intlify/vue-i18n-next/issues/391

赞(0）回复(0）举报 2022-11-17

p5fdfcr14#

我在控制台上看到了同样的警告，然后我将项目更新为“vue-i18 n”：“^9.2.0-beta.15“而且还挺好的。
首先将vue-18 n安装到最新软件包（^9.2.0-beta.15）：npm i --save vue-i18n@next
然后：我在与main.ts相同的路径上创建了**i18n.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');

赞(0）回复(0）举报 2022-11-17

vql8enpb5#

我正在使用Vue-cli，在这个解决方案后，我解决了同样的问题，只是尝试它！config在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')
  }**
})

赞(0）回复(0）举报 2022-11-17

guicsvcw6#

适用于Nuxt 3的解决方案（“nuxt”：“3.0.0-rc.12“）与Vite合作。
以防万一：
(You如果在启动服务器时看到“Vite client warmed up in... ms”（Vite客户端在... ms内预热），则说明您的Nuxt应用程序使用了Vite）关于配置构建工具：https://v3.nuxtjs.org/migration/bundling/
您的应用程序/nuxt.config.ts：

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

赞(0）回复(0）举报 2022-11-17

f1tvaqid7#

国家预防措施第1版-18 n
import { createI18n } from 'vue-i18n/dist/vue-i18n.cjs'
这在Vue 3中对我很有效。
我的@vue/cli 5.0.3版本。
我的vue-i18n版本是9.2.2。

赞(0）回复(0）举报 2022-11-17

tvmytwxo8#

将vue-i18n和@intlify/vite-plugin-vue-i18n更新为next版本。

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

赞(0）回复(0）举报 2022-11-17

我来回答

您正在运行vue-i18 n的esm-bundler内部版本,建议将您的bundler配置为将功能标记全局变量显式替换为

8条答案

相关问题

热门标签

最新问答