Webpack 无法挂载 Vue 组件

Posted 2023-02-22

【中文标题】Webpack 无法挂载 Vue 组件

【英文标题】：Webpack fails to mount Vue components

【发布时间】：2018-01-21 02:58:00

【问题描述】：

在使用 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'  ]
  

【问题讨论】：

尝试将const Vue = require('vue/dist/vue.common.js') 更改为const Vue = require('vue')。详情请参阅github.com/vuejs/vue-router/issues/713 和vuejs.org/v2/guide/…。

这会导致Vue is not a constructor。 dist 中的所有文件我都试过了，都没有。

您是否考虑过通过vue-cli 从默认模板之一开始？ github.com/vuejs/vue-cli

【参考方案1】：

我的问题是文件的位置。我以这种风格保存我的文件

ListItem.ts
ListItem.vue
ListItem.scss
index.ts

问题是我在list-item 目录中没有文件，只是像import ListItem from './components/ListItem'; 一样导入将它们移动到目录中并将导入更新为./compoents/list-item 解决了我的问题。

每次都会遇到的那些该死的复制意大利面错误之一。

【参考方案2】：

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

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

我使用vue 2.6.12 和Import Vue from 'vue'。就像żyy提议的一样，我加了一个别名

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

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

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

let _ = new Vue();

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

【参考方案3】：

我知道它很旧，但有人可能会遇到这个问题。

尝试将解析别名添加到您的 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

【参考方案4】：

这仅仅是因为change of vue-loader。

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

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

【讨论】：

谢谢。周一回到办公室时，我会看看这是否有效。

这对我有用！在Vue.component() 函数内部也可以轻松更改：Vue.component('test', require('../components/Test.vue').default);