Vue 组件未显示/更新答案

【问题标题】：Vue Components not showing/updatingVue 组件未显示/更新
【发布时间】：2017-08-10 22:22:55
【问题描述】：

我在 Laravel 5.4 中工作，而 Vue 组件没有显示/更新。我开始一个新项目并在 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'
});

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

聊天.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，当我重新加载页面时它不会改变，它只是保持不变。我尝试重新启动电脑，再次运行 php artisan，我能想到的任何事情。我尝试将一些 Vue 代码直接放在 chat.blade.php 中，然后它就可以工作了。看起来它没有检测到 app.js 和组件的变化。仅供参考，我什至删除了 Example.vue 组件。它仍然出现在页面上。

【问题讨论】：

我不知道 Laravel 在引擎盖下做了什么以及它如何编译东西，但我认为 php artisan 不关心 Javascript。你有没有试过在编辑文件后运行npm run dev？
您也可以使用npm run watch，以便在更改时重新编译文件，这样可以节省所有后续请求的初始开销。
现在可以使用了，谢谢！

标签： laravel vue.js vuejs2 vue-component

【解决方案1】：

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

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

【讨论】：

这并没有解释它如何或为什么会起作用，请添加有关解决方案的更多信息。
请解释您的解决方案，而不是编写代码。
app.js里已经有代码了，为什么还要加到blade文件里..！

【解决方案2】：

解决这个问题的最好方法是更新 npm，因为它会更新所有的包并安装丢失的包，结果你将有 laravel mix 编译你的资产；现在你不能这样做。

npm update

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

npm run watch-poll

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：