Question

使用Webpack和Vue编译项目后，当我打开一个使用Vue组件的页面时，我得到：

[Vue warn]: Failed to mount component: template or render function not defined.

代替组件Vue渲染

<-- function (a, b, c, d) { return createElement(vm, a, b, c, d, true); } -->

为什么会发生此错误？

注意：I've created an MCVE for this problem.使用的确切Webpack配置是：

module.exports = {
  entry: __dirname + '/display.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [ { test: /\.vue$/, loader: 'vue-loader' } ]
  }
}

Answer 1

这完全归功于change of vue-loader。

从版本13.0.0开始，vue-loader不再对导出进行规范化。你必须做 const app = require('./app.vue').default

所以，只需将Child: require('./child.vue')中的display.js更改为Child: require('./child.vue').default，然后就可以了。

Answer 2

我知道它已经老了，但有人可能会遇到这个问题。

尝试在您的webpack配置中添加解析别名：

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

更多关于此事：

https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Answer 3

我在使用 snowpack 时遇到了同样的问题。

我在尝试解决我遇到的问题时偶然发现了这个问题，所以我想如果有人处于与我相同的情况，这可能会有所帮助：

我将 vue 2.6.12 与 Import Vue from 'vue' 一起使用。就像 żyy 提议的那样，我添加了别名

alias: {
        'vue': 'vue/dist/vue.esm.js',
    },

到snowpack.config.js。然而，这还没有完全解决它。我不确定为什么这不起作用，但我认为这与雪包在捆绑后应用别名的事实有关。所以你需要强制snowpack也捆绑vue/dist/vue.esm.j，我通过在我的项目中创建一个虚拟文件来完成：

// _.js:
import Vue from 'vue/dist/vue.esm.js';

let _ = new Vue();

我不认为这是一个完美的解决方案，所以请随时提出更好的替代方案。

Webpack无法安装Vue组件

3 个答案: