VueJS 不呈现模板内容
Posted
技术标签:
【中文标题】VueJS 不呈现模板内容【英文标题】：VueJS not rendering template content 【发布时间】：2021-04-29 04:33:44 【问题描述】：我最近开始将我的 laravel 8 项目转换为 VueJS，但它似乎没有呈现它的模板内容。
好吧，我使用以下命令来包含 Vue 的基本结构：php artisan ui vue && npm install
app.js：
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue(
el: '#app',
);
webpack.mix.js：
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
主视图：
<!doctype html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body id="app">
<example-component></example-component>
<script type="text/javascript" src=" asset('js/app.js') "></script>
</body>
</html>
Npm build 运行良好，没有错误。但不幸的是，模板内容在前端是不可见的。我看到的一切都是 vue-tag 本身，例如：
提前致谢！
【问题讨论】：
这能回答你的问题吗？ Laravel Vue You may need an appropriate loader to handle this file type, 不是真的，我还在用 laravel-mix 5.0.5 然后试试npm i && npm run dev
同样，构建工作正常，但仍然没有前端输出。 ://
window.Vue = require('vue').default; 到 window.Vue = require('vue') 试试这个
【参考方案1】：
根组件不应安装在 body 元素中，您必须执行以下操作：
<body >
<div id="app">
<example-component></example-component>
</div>
<script type="text/javascript" src=" asset('js/app.js') "></script>
</body>
并从window.Vue = require('vue').default; 中删除default：
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue(
el: '#app',
);
【讨论】：
以上是关于VueJS 不呈现模板内容的主要内容，如果未能解决你的问题，请参考以下文章
html 获取通过VUEJS呈现的HTML内容 - Django Backend
html 获取通过VUEJS呈现的HTML内容 - Django Backend
将 vue js 应用程序绑定到 django 模板不显示任何内容
组件已安装但模板标签未在生产环境中呈现（但在开发中呈现）： Nuxtjs Vuejs Vuetifyjs Rollupjs