未定义 Vue 模板或渲染函数答案

【问题标题】：Vue template or render function not defined未定义 Vue 模板或渲染函数
【发布时间】：2020-07-28 19:01:48
【问题描述】：

我的网站上的 Vue 渲染有问题。我从github 下载了一些论坛应用程序，安装时遇到了一些困难，因为 npm 没有真正更新，应用程序是 2 年前的。我设法用 package.json 解决了有关 npm 的所有问题，例如：

"devDependencies": {
        "axios": "^0.18.1",
        "bootstrap": "^4.4.1",
        "cross-env": "^5.2.1",
        "jquery": "^3.5.0",
        "laravel-mix": "^5.0.4",
        "lodash": "^4.17.15",
        "popper.js": "^1.16.1",
        "resolve-url-loader": "^3.1.1",
        "sass-loader": "^8.0.2",
        "vue": "2.5.21",
        "vue-template-compiler": "2.5.21"
    },
    "dependencies": {
        "laravel-echo": "^1.7.0",
        "node-sass": "^4.13.1",
        "pusher-js": "^4.4.0",
        "vue-loader": "15.5.1",
        "vue-router": "^3.1.6",
        "vue-simplemde": "^1.0.4",
        "vuetify": "^1.5.24"
    }

但现在问题在于渲染 vue：

app.js:71622 [Vue 警告]：无法挂载组件：模板或渲染函数未定义。

这就是 app.js 的样子：

require('./bootstrap');

window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'


Vue.use(Vuetify)
Vue.use(VueSimplemde)
import md from 'marked'
window.md = md;

import User from './Helpers/User'
window.User = User

import Exception from './Helpers/Exception'
window.Exception = Exception

window.EventBus = new Vue();

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('AppHome', require('./components/AppHome.vue'));
import router from './Router/router.js'

const app = new Vue({
    el: '#app',
    router
});

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

您收到该错误是因为您的应用根本没有指定渲染模板，new Vue() 缺少名为 Render Function 的 render 选项。

这将包含应用程序在最重要的地方工作所需的最低 HTML：<div id="app"></div> 是必需的，因为设置为 #app 的 el 选项告诉 Vue 在渲染时应该将其自身安装到哪个 html 元素。

为实例提供模板的最常见方式是拥有一个专用组件，该组件将作为应用顶级 html 布局的所在地，但最低要求如下：

// App.vue

<template>

  <div id="app"></div>

</template>

// app.js

import Vue from 'vue'
import App from './App.vue' // <-- MAIN TEMPLATE
import router from './router'

const app = new Vue({
  el: '#app',
  render: h => h(App), // <-- REGISTER MAIN TEMPLATE
  router
});

然而，由于这个来源似乎是一个 Laravel 项目，很明显 HTML 是在刀片模板中呈现的服务器端，我总是发现 Laravel 呈现 Vue 组件服务器端是一个古怪的概念，我更喜欢 Laravel 的 SPA 作为API。

也许这个资源会帮助https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/

【讨论】：