javascript - 未定义 Vue 模板或渲染函数
问题描述
我的网站上的 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
});
解决方案
您收到该错误是因为您的 App 根本没有指定渲染模板,new Vue()
缺少render
名为Render Function的选项。
这将包含应用程序在最重要的地方工作所需的最低 HTML:<div id="app"></div>
是必需的,因为el
设置为的选项#app
告诉 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 组件服务器端是一个古怪的概念,我更喜欢一个 SPA 与 Laravel 充当 API。
也许这个资源会帮助https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/
推荐阅读
- css - 没有使用 scss intelliSense 和 scss 扩展从 vscode 获得 scss 建议
- linux - 如何在 Oracle Linux 8 中安装调试工具?
- html - 为什么我的 react-boostrap 按钮的 CSS 不起作用?
- php - 如何在 Controller Laravel 中记录每个功能
- indexing - 为什么索引 HashMap 不返回引用?
- google-app-engine - GAE - 如何在 quarkus java11 应用程序中配置从 Google App Engine 访问 Cloud SQL?
- curl - curl 默认应该使用 tls1.2 而不是 tls1.3
- python - 通过函数调用字典中键的值
- python - 如果未提供名称字段,则显示错误消息的方法
- php - 权限用户和管理员 yii2