Question

导入没有.vue扩展名的vue文件时出现以下错误。

错误 ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 找不到模块：错误：无法解析'./components/Navbar'

我的网络配置如下

notesMetadataList = noteStore.findNotesMetadata(filter, 0, 25, spec)
for noteMetadata in notesMetadataList.notes:
   tagNames = noteStore.getNoteTagNames(noteMetadata.guid)

Answer 1

问题在于您的Webpack配置。要使Webpack自动解析.vue扩展名，请使用resolve.extensions选项，并包含默认值。

resolve: {
    extensions: ['*', '.js', '.vue', '.json']
}

Answer 2

如果您遵循eslint并且遇到此错误，请尝试在eslint配置中添加以下几行

...
rules: {
    // other stuff
    'import/extensions': ['error', 'always', {
      js: 'never',
      mjs: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never',
      vue: 'never'
    }]
  },
...

Answer 3

问题出在Webpack配置中。

通过在Webpack module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } },

中包含扩展数组，使Webpack自动解析.vue扩展名

resolve

Answer 4

解决方案是对所有import语句禁用eslint。

MessagesViewController

这个问题是airbnb预设的特有问题。

导入没有.vue扩展名的* .vue文件时出现以下错误？

4 个答案: