[Vue 警告]：无法挂载组件：Vue CLI 4 中未定义模板或渲染函数

Posted 2023-02-16

【中文标题】[Vue 警告]：无法挂载组件：Vue CLI 4 中未定义模板或渲染函数

【英文标题】：[Vue warn]: Failed to mount component: template or render function not defined in Vue CLI 4

【发布时间】：2021-03-19 01:31:51

【问题描述】：

我正在尝试在使用 Vue CLI 4 创建的 Vue 应用程序内的组件中导入 v-movable (https://github.com/thewebkid/v-movable)，但我不断收到以下错误：

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

  found in

    ---> <Movable>
      <Intro>
        <App> at src/App.vue
          <Root>

目前我的 main.js 文件如下所示：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue(
  render: h => h(App),
).$mount('#app');

我的 Intro.vue 组件文件如下所示：

<template>
  <div class="intro">
    <div class="guideline">
      <div class="circle start-circle"></div>
      <movable class="circle end-circle">
        <IconSlideUp id="icon-slide-up" />
        <span class="label">Slide</span>
      </movable>
      <div class="line"></div>
    </div>
  </div>
</template>

<script>
import IconSlideUp from '@/assets/icon-slide-up.svg'
import movable from 'v-movable'

export default 
  name: 'Intro',
  props: 
    msg: String
  ,
  components: 
    IconSlideUp,
    movable
  ,
  methods: 
    
  

</script>


<style scoped lang="scss">
...
</style>

我需要在我的 main.js 中全局注册可移动吗？我该怎么做呢？任何帮助将不胜感激，如果我可以/应该提供任何其他信息，请告诉我。

【参考方案1】：

在项目的 Github 演示中，有一个组件导入，可以这样在 SFC 中完成：

import movable from './components/movable';

^{https://codesandbox.io/s/mystifying-cartwright-yvis1}

您正在使用插件安装，但在组件内部而不是 main.js 中进行安装，并且缺少 Vue.use。从您的组件中删除导入并更改 main.js:

main.js

import Vue from 'vue'
import App from './App.vue';
import movable from 'v-movable';

Vue.use(movable);

Vue.config.productionTip = false;

new Vue(
  render: h => h(App),
).$mount('#app');

【讨论】：

结果是一样的。我正在通过 npm 安装 v-movable，这就是我以这种方式导入它的原因，如文档 (thewebkid.com/modules/v-movable) 中所述。

由于您不想导入组件（如果您正确执行，结果是不一样的 - 您可以从演示中看到），我已经编辑以解释有什么问题你的插件安装。两者都是通过 npm 安装的，这不是问题，有两个选项：插件安装或组件导入

固定插件安装效果如何？

关键是将其作为组件导入，而不是使用插件安装。感谢您的帮助！