VueJS 不呈现模板内容答案

【问题标题】：VueJS not rendering template contentVueJS 不呈现模板内容
【发布时间】：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') 试试这个

标签： javascript laravel vue.js

【解决方案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',
});

【讨论】：