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

Posted 2023-02-22

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

【英文标题】：I get following error when I import *.vue files without .vue extension?

【发布时间】：2017-11-01 15:02:13

【问题描述】：

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

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

我的网页后台配置如下

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'
    
  ,

【参考方案1】：

问题出在 Webpack 配置中。

通过在 Webpack 中包含扩展数组 resolve 使 Webpack 自动解析 .vue 扩展

 resolve: 
    extensions: ['.vue'],
   ,

【讨论】：

vue js中默认包含这个扩展，可以用vue inspect查看，添加这个扩展对我没有任何影响

【参考方案2】：

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

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

【讨论】：

这对我有用，但我不明白为什么。这如何让 Webpack 知道当你导入一个没有扩展名的模块时，它实际上是一个 Vue 文件？

@Neil webpack.js.org/configuration/resolve/#resolveextensions。如果您没有提供，它会猜测您的文件扩展名是什么。这是它会猜测的顺序（如果两个文件具有相同的扩展名）

【参考方案3】：

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

/*eslint-disable */
import DashboardLayout from '../layouts/DashboardLayout';

//after all import statements, you enable eslint.
/*eslint-enable */

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

【参考方案4】：

如果您关注 eslint 并收到此错误，请尝试在您的 eslint 配置中添加以下行

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