當我構建Vue項目時出現「裝載組件失敗：模板或渲染功能未定義」錯誤

Question

我試圖用webpack構建一個Vue項目，但我在控制檯上收到錯誤。

[Vue warn]：裝載組件失敗：未定義模板或渲染函數。

這是我的代碼：
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> 

我試圖用「vue/dist/vue.js」或「vue/dist/vue.esm.js」替換「vue/dist/vue.common.js」，沒有幫助。 我該怎麼辦？

Answer 1

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

我不認爲你可以串在一起，這樣的裝載機（爲.vue文件）;如果您閱讀vue-loader documentation，它會告訴您如何爲腳本和樣式配置裝載機，如下所示：

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