如何配置vue.config.js以在使用nm运行服务时删除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配置为与使用

npm run serve

以移除控制台警告的方式？或者在我的vue-i18n项目中配置/使用/添加vue3的确切步骤是什么。

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

我也面临着同样的问题，如果您处于开发模式，这似乎是正常的。

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

你不应该在生产层面上看到这一点

Answer 2

此警告消息的含义是，在进行生产生成时，需要在bundler中显式指定标志。

请参阅vue-i18n为套筒提供的软件包的以下链接。

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

帮助您解决的一个建议是为上面链接的备注部分中列出的每个绑定程序使用插件，它们将为您正确地配置它们。我建议你去看看。

查看问题在GitHub论坛中列出的内容。