Nuxt 和 Webpack：模块解析失败：意外字符 '�' (1:0)

Question

我有一个 vue 轮播组件，我想在静态文件夹中生成 .png 文件的列表。关注Dynamically import images from a directory using webpack 和关注https://webpack.js.org/guides/dependency-management/#context-module-api 我的组件如下所示：

<script>

  var cache = {};
  const images = require.context('../static/', false, /PNG$/);
  // const images = ["./52lv.PNG", "./Capture1.PNG", "./maps.PNG"]
  console.log(images.keys());
  console.log(images);
  var constructed = [];
  function constructItems(fileNames, constructed) {
    fileNames.forEach(fileName => {
      constructed.push({
        'src': fileName
      })
    });


    return constructed;
  }

  console.log(res);
  export default {
    data: function() {
      return {
        items: res
      };
    }
  };

</script>

当我跑步时

$npm run dev

我明白了：

    √ Client
    Compiled successfully in 946.50ms

    √ Server
    Compiled successfully in 708.75ms


    WARN  Compiled with 2 warnings                                                               friendly-errors 20:54:28


    WARN  in ./static/91lv.PNG                                                                   friendly-errors 20:54:28

    Module parse failed: Unexpected character '�' (1:0)                                           friendly-errors 20:54:28
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
                                                                                                friendly-errors 20:54:28
    @ ./static sync nonrecursive \.PNG$
    @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/carousel.vue?vue&type=script&lang=js&
    @ ./components/carousel.vue?vue&type=script&lang=js&
    @ ./components/carousel.vue
    @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=script&lang=js&
    @ ./layouts/default.vue?vue&type=script&lang=js&
    @ ./layouts/default.vue
    @ ./.nuxt/App.js
    @ ./.nuxt/index.js
    @ ./.nuxt/client.js
    @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr/client ./.nuxt/client.js                                                                                              friendly-errors 20:54:28

    WARN  in ./static sync nonrecursive \.PNG$                                                   friendly-errors 20:54:28

    There are multiple modules with names that only differ in casing.                             friendly-errors 20:54:28
    This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
    Use equal casing. Compare these module identifiers:
    * ......\js\nuxt4\static sync nonrecursive /\.PNG$/
        Used by 1 module(s), i. e.
    ......\js\nuxt4\node_modules\babel-loader\lib\index.js??ref--2-0!......\js\nuxt4\node_modules\vue-loader\lib\index.js??vue-loader-options!......\js\nuxt4\components\carousel.vue?vue&type=script&lang=js&
    * ......\js\nuxt4\static sync nonrecursive /\.png$/
        Used by 2 module(s), i. e.
        ......\js\nuxt4\node_modules\babel-loader\lib\index.js??ref--2-0!......\js\nuxt4\node_modules\vue-loader\lib\index.js??vue-loader-options!......\js\nuxt4\pages\index.vue?vue&type=script&lang=js&
                                                                                                friendly-errors 20:54:28

我该如何解决这个问题？

Answer 1

好的，这很奇怪 - 我将所有名为 *.PNG 的文件都更改为 *.png，问题就消失了。