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 пытается проанализировать файлы уценки?Что ж, в динамическом требовании вы указали, что можете запросить любой файл, который находится внутри ~/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 -Как требовать в каталоге все файлы .js, кроме `_test.js`, в каталоге? и https://github.com/survivejs/webpack-book/issues/80#issuecomment-216068406