使用 nm 运行 serve 时如何配置 vue.config.js 以消除 vue-i18n 控制台错误

Question

我是 Vue 的新手，我正在尝试设置 vue-i18n 并继续收到控制台警告

You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

我的过程

$npm install vue-i18n@next
$npm i --save-dev @intlify/vue-i18n-loader@next

我尝试根据各种堆栈溢出答案向我的 vue.config.js 文件添加不同的东西，包括

module.exports = {
    chainWebpack: config =>
    {
        config.module
            .rule( 'i18n' )
            .resourceQuery( /blockType=i18n/ )
            .type( 'javascript/auto' )
            .use( 'i18n' )
            .loader( '@intlify/vue-i18n-loader' )
    }
}

和

const webpack = require('webpack');

module.exports = {
    configureWebpack:
    {
        plugins: [
            // Define Bundler Build Feature Flags
            new webpack.DefinePlugin( {
                __VUE_OPTIONS_API__: false,
                __VUE_I18N_FULL_INSTALL__: true,
                __VUE_I18N_LEGACY_API__: true,
                __VUE_I18N_PROD_DEVTOOLS__: false,
                __INTLIFY_PROD_DEVTOOLS__: false
            } ),
        ],
    }
};

当我使用第一个示例时 vue.config.js 全局值都使用正确的值记录到控制台，但我仍然收到警告。

似乎唯一可以消除错误的方法是修改 i18n 导入。

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

但是，这似乎是错误的，因为它只是绕过了生成警告的文件。

我的问题也归结为...

如何配置 vue-i18n 以使用我使用

的 vue3 项目

npm run serve

以消除控制台警告的方式？或者在我的 vue3 项目中 configure/use/add vue-i18n 的确切步骤是什么。

package.json

{
  "name": "octo-train-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@mdi/font": "^6.4.95",
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "dotenv-webpack": "^7.0.3",
    "form-data": "^4.0.0",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primevue": "^3.8.2",
    "vue": "^3.0.0",
    "vue-axios": "^3.4.0",
    "vue-i18n": "^9.0.0-rc.4",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^4.1.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "node-sass": "^4.12.0",
    "prettier": "^2.2.1",
    "sass-loader": "^8.0.2"
  }
}

Answer 1

The meaning of this warning message is that you need to specify the flag explicitly in the bundler when you do a production build.

vue-i18n为bundlers提供的包请参考以下link

https://vue-i18n.intlify.dev/installation.html#with-a-bundler

一个可以帮助您解决问题的建议是，为上面 link 的注意部分中列出的每个捆绑器使用插件，他们会为您正确配置它们。我建议您检查一下。

查看 GitHub 论坛中列出的这个 issue。

Answer 2

我遇到了同样的问题，如果你在开发模式下似乎是正常的。

https://github.com/intlify/vue-i18n-next/issues/810

您不应该在生产级别上看到它

使用 nm 运行 serve 时如何配置 vue.config.js 以消除 vue-i18n 控制台错误

How to configure vue.config.js to remove vue-i18n console error when using nm run serve

vuejs3

vue-i18n