Nuxt - 模块解析失败：意外字符'＃'

Question

为什么我在下面收到以下警告：

<img :src="getImgUrl(post.thumbnail.src)" :alt="post.thumbnail.alt">

  methods: {
    getImgUrl(pic) {
      return require( '~/assets/' + pic )
    }
  }

终端警告：

Module parse failed: Unexpected character '#' (1:0)                                               friendly-errors 16:58:06
You may need an appropriate loader to handle this file type.
> # ASSETS
| 
| **This directory is not required, you can delete it if you don't want to use it.**
                                                                                                  friendly-errors 16:58:06
 @ ./assets sync ^\.\/.*$
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/work/index.vue?vue&type=script&lang=js&
 @ ./pages/work/index.vue?vue&type=script&lang=js&
 @ ./pages/work/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

我有什么想法可以解决这个问题吗？

Answer 1

通过查看错误的文件内容，您可以看到它是一个降价文件。如果你检查你的assets文件夹有一个README.md文件。这是webpack无法“理解”的那个。

为什么webpack尝试解析markdown文件？好吧，在动态需求中，您已经指定可以请求~/assets中的任何文件，因此webpack必须解析它遇到的所有文件。

您可以通过以下方式解决此问题

• 删除README.md文件
• 指定您可能需要的扩展名，以便webpack可以调整其匹配器： require( '~/assets/' + pic + '.jpg') 这个是非常有限的，因为现在你只能使用jpg图像，你必须在调用函数时去除扩展。
• 使用require.context，它允许您根据RegEx匹配文件（在这种情况下，所有文件都不会在.md上结束）

  getImgUrl(pic) {
    let context = require.context('~/assets/', false, /^(?!.*\.(?:md)$).*/);
    return context('./' + pic);
  }

  如果您正在使用子目录，则可能需要将第二个参数（文档中的useSubdirectories）更改为true。此外，您可能需要调整./连接以获得重复的斜杠。 功能基于Webpack - Require.context -How to require all .js files except `_test.js` in a directory?和https://github.com/survivejs/webpack-book/issues/80#issuecomment-216068406