Question

我在Vue页面中定义了以下方法：

getIsoCountryCode: function(country){
            console.log(countries);
            return "flag-icon-" + countries.getAlpha2Code(country, 'en');
        }

该函数返回flag-icon-undefined，即使它在Vue / Webpack环境之外进行测试时也能正常工作。

Webpack配置：

const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");

module.exports = {
  entry: "./lib/team-page/team.js",
  devtool: "source-map",
  watch: true,
  resolve: {
    alias: {
      flag_icon_css: __dirname + "/node_modules/flag-icon-css/css/flag-icon.css"
    }
  },
  output: {
    path: path.resolve(__dirname, "public/lib"),
    filename: "team.js"
  },
  mode: "development",
  module: {
    rules: [{
      type: 'javascript/auto',
      test: /\.(json|html)/,
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'file-loader',
        options: { name: '[name].[ext]' },
      }]
    },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.scss$/,
        use: [
            {loader: "style-loader"},

          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
            {loader: "style-loader"},

          {
            loader: "css-loader"
          }
        ]
      },
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
      {
        test: /\.svg$/,
        loader: 'file-loader',
        options: {
          name: '../assets/flags/[name].[ext]'
        }
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
 };

我检查了调试器，并在Webpack编译的文件中找到了这段代码：

var codes = __webpack_require__(/*! ./codes.json */ "./node_modules/i18n-iso-countries/codes.json");

它仍然指向node_modules文件夹，即使我原本希望它在捆绑包中。（编辑：这似乎并不重要，axios以相同的方式定义，并按预期工作。）

我在我的配置文件中添加了建议here的规则，但它仍无效。

编辑：要使其工作，您必须先注册区域设置。对于英语：countries.registerLocale(require("i18n-iso-countries/langs/en.json"));

Webpack无法正确解析json文件

0 个答案: