* .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の構成である下記の通りです。

あなたには、いくつかのVUEのコンポーネントをインポートするとき、あなたは子conponent後にファイル拡張子を追加する必要がありますWebPACKのは、自動的にWebPACKのresolveに拡張アレイを含むによって.vue拡張子を解決

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

Answer 2

ください。このよう ：

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

Answer 3

問題は、あなたのWebPACKの構成です。 Webpackが.vue拡張機能を自動的に解決するようにするには、resolve.extensionsオプションを使用し、デフォルトを含めます。

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