Vue 组件不是 showing/updating

Question

我在 Laravel 5.4 工作，Vue 组件不是 showing/updating。我开始一个新项目并在 web.php

中创建一个路由 /chat

这是chat.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div id="app">
<example></example>
<chat></chat>
</div>

<script type="text/javascript">
window.Laravel = { csrfToken: '{{ csrf_token() }}' };
</script>
<script src="js/app.js"></script>
</body>
</html>

这是app.js

require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat', require('./components/Chat.vue'));

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

示例和聊天组件是一些基本模板，我没有传递任何数据，只是纯文本。

Chat.vue

<template lang="html">
<div id="content">
    <h1>Messages</h1>
    <p>Message text</p>
    <small>Hiii</small>
</div>
 </template>

<script>
export default {
}
</script>

当我第一次运行 php artisan 时，一切正常。我尝试编辑 Chat.vue 中的一些文本，例如将 'Hiiii' 更改为 Hello，当我重新加载页面时它不会改变，它只是保持不变。我尝试重新启动电脑，再次运行ning php artisan，任何我能想到的。我尝试将一些 Vue 代码直接放在 chat.blade.php 中，但它确实有效。看起来它没有检测到 app.js 和组件的变化。仅供参考，我什至删除了 Example.vue 组件。它仍然出现在页面上。

Answer 1

将此代码复制到 app.blade.php 中：

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

Answer 2

解决此问题的最佳方法是更新 npm，因为它会更新所有包并安装缺少的包，因此您将 laravel 混合编译您的资产；现在你还不能这样做。

npm update

对于某些人来说，一个更简单的解决方案是运行 watch-pol 命令

npm run watch-poll

Answer 3

您是否尝试过清除浏览器缓存？这应该可以解决问题。

Answer 4

有时我们从互联网上复制代码时会添加一些不需要的行。只需检查 App/Config/app 中的这一行。确保它处于开发模式。

'env' => env('APP_ENV', 'development'),

Answer 5

大家我刚刚得到答案，我想与大家分享。问题：- 我正在学习 Vue js，我需要每天删除浏览器历史记录以查看我在 editor.so 中所做的更改我搜索它但没有找到有价值的答案。但现在我得到了解决方案，所以我决定与大家分享这个解决方案。你需要做的就是 1）转到开发人员工具。 2）点击网络选项卡 3）单击禁用缓存（请看下图中突出显示的部分） 4）再次刷新您的页面！

Vue 组件不是 showing/updating

Vue Components not showing/updating

laravel

vue.js

vue-component

vuejs2