Vue2+Webpack报错：Failed to mount component: template or render function not defined.

最新推荐文章于 2024-07-30 20:48:13 发布

忙碌的布谷鸟

最新推荐文章于 2024-07-30 20:48:13 发布

阅读量2.3w

点赞数

本文链接：https://blog.csdn.net/guoquanyou/article/details/56479456

版权

需要在webpack.config.js文件中添加以下配置：

resolve: {
        /**
         * Vue v2.x之后NPM Package默认设置只会生成runtime-only 版本，若要使用standalone功能則需如下设置
         * 否则会报错：Failed to mount component: template or render function not defined.
         */
        alias: {
            vue: 'vue/dist/vue.js'
        },
        extensions: ['', '.js', '.vue']
}

webpack.config.js完整代码如下：

var webpack = require('webpack')

module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',
        publicPath: 'dist/',
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                // edit this for additional asset file types
                test: /\.(png|jpg|gif)$/,
                loader: 'file?name=[name].[ext]?[hash]'
            }
        ]
    },
    // example: if you wish to apply custom babel options
    // instead of using vue-loader's default:
    babel: {
        presets: ['es2015', 'stage-0'],
        plugins: ['transform-runtime']
    },
    resolve: {
        /**
         * Vue v2.x之后NPM Package默认设置只会生成runtime-only 版本，若要使用standalone功能則需如下设置
         * 否则会报错：Failed to mount component: template or render function not defined.
         */
        alias: {
            vue: 'vue/dist/vue.js'
        },
        extensions: ['', '.js', '.vue']
    }
}