Question

我正在尝试使用webpack构建一个Vue项目，但我在控制台上收到错误。

[Vue警告]：无法安装组件：模板或渲染函数未定义。

这是我的代码：
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'
            ]
        }
    }
}

在构建Vue项目时出现错误“无法安装组件：模板或渲染函数未定义”

1 个答案: