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

Posted 2023-02-22

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

【英文标题】：Getting an error "Failed to mount component: template or render function not defined" when I building a Vue project

【发布时间】：2017-11-21 03:39:43

【问题描述】：

我正在尝试使用 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.common.js”替换为“vue/dist/vue.js”或“vue/dist/vue.esm.js”，但没有帮助。 我还应该做什么？

【参考方案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'
            ]
        
    

【讨论】：

感谢您的帮助！我已经按照你的方法解决了这个问题。