Fehler beim "Mounten einer Komponente: Vorlage oder Renderfunktion nicht definiert" beim Erstellen eines Vue-Projekts

Question

Ich versuche, ein Vue-Projekt mit Webpack zu erstellen, bekomme aber einen Fehler auf der Konsole.

[Vue warn]: Fehler beim Mounten der Komponente: Vorlage oder Renderfunktion nicht definiert.

Dies ist mein Code:
webpack.config.js

var Webpack = require('webpack'); 
var path = require('path'); 
var rootPath = path.resolve(__dirname); 

module.exports = { 
    entry: [ 
     'webpack-dev-server/client?http://localhost:8080', 
     './src/main.js' 
    ], 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'bundle.js', 
     publicPath: '/dist/' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.vue$/, 
      loader: 'vue-loader!style-loader!css-loader!sass-loader!autoprefixer!babel-loader' 
     }, { 
      test: /\.css$/, 
      loader: "style-loader!css-loader" 
     }, { 
      test: /\.(png|jpg)$/, 
      loader: 'url-loader?limit=8192' 
     }, { 
      test: /\.js$/, 
      include: [ 
       path.join(rootPath, 'src') 
      ], 
      exclude: /node_modules/, 
      loader: 'babel-loader' 
     }, { 
      test: /\.scss$/, 
      loader: 'sass-loader' 
     }, { 
      test: /\.html$/, 
      loader: 'html-loader' 
     }] 
    }, 
    plugins: [ 
     new Webpack.HotModuleReplacementPlugin() 
    ], 
    devServer: { 
     historyApiFallback: true, 
     hot: false, 
     inline: true 
    }, 
    resolve: { 
     extensions: [ '.js', '.vue'], 
     modules: [path.join(__dirname, 'node_modules')], 
     alias: { 
      'vue$': 'vue/dist/vue.common.js' 
     } 
    } 
} 

---

main.js

import Vue from 'vue'; 
import app from './App'; 
import VueRouter from 'vue-router'; 

Vue.use(VueRouter); 

Vue.config.debug = true; 
Vue.config.devtools = true; 

let vueRouter = new VueRouter({ 
    routes: [{ 
     path: '/', 
     component: require('./components/main') 
    }, { 
     path: '/not-found', 
     component: require('./components/not-found') 
    }] 
}); 

new Vue({ 
    el: '#app', 
    render: (h) => h(app) 
}); 

---

App.vue

<template> 
    <div> 
     <div> 
      <h1>{{message}}</h1> 
     </div> 
    </div> 
</template> 
<script> 
    export default { 
     data(){ 
      return { 
       message: 'My Vue' 
      } 
     } 
    } 
</script> 
<style lang="sass" rel="stylesheet/scss"> 
    body { 
     background: red; 
     #app { 
      h1{ 
       color: red; 
      } 
     } 
    } 
</style> 

Ich habe versucht, "vue/dist/vue.common.js" mit "vue/dist/vue.js" oder "vue/dist/vue.esm.js" zu ersetzen, nicht helfen. Was soll ich sonst tun?

Answer 1

{ 
    test: /\.vue$/, 
    loader: 'vue-loader!style-loader!css-loader!sass-loader!autoprefixer!babel-loader' 
} 

Ich glaube nicht, können Sie aneinanderzureihen die Lader wie folgt aus (für .vue Dateien); wenn Sie die vue-loader documentation lesen, es zeigt Ihnen, wie die Loader für das Skript konfigurieren und Stil, so etwas wie diese:

{ 
    test: /\.vue$/, 
    loader: 'vue-loader', 
    options: { 
     loaders: { 
      // Customize to your liking 
      js: 'babel-loader', 
      scss: [ 
       'style-loader', 
       'css-loader', 
       'sass-loader' 
      ] 
     } 
    } 
}