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，问题消失了。