當我導入* .vue文件沒有.vue擴展名時，出現以下錯誤？

Question

當我導入沒有.vue擴展名的vue文件時，出現以下錯誤。

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue Module not found: Error: Can't resolve './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' 
    } 
    }, 

Answer 1

的問題是在配置的WebPack。

製作的WebPack通過包括擴展陣列中的WebPack resolve

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

Answer 2

當你輸入一些VUE組件，您應該在孩子conponent後添加後綴的文件自動解決.vue擴展。 像這樣：

import Navbar from './components/Navbar.vue' 

Answer 3

問題出在您的Webpack配置中。要使Webpack自動解析.vue擴展名，請使用resolve.extensions選項，幷包含默認值。

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