Question

我在Laravel 5.4中工作，而Vue组件没有显示/更新。我开始一个新项目并在web.php中创建一个路由/聊天

这是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中编辑一些文本，比如改变＆＃39; Hiiii＆＃39;您好，当我重新加载页面时，它不会改变，它只是保持不变。我尝试重新启动电脑，再次运行php artisan，我能想到的任何东西。我尝试将一些Vue代码直接放在chat.blade.php中，而不是它的工作原理。看起来它没有检测到app.js和组件的变化。仅供参考，我甚至删除了Example.vue组件。它仍然出现在页面上。

Answer 1

解决此问题的最佳方法是更新npm，因为它会更新所有软件包并安装缺少的软件包，因此您将使用laravel mix编译资产;现在你无法这样做。

npm update

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

npm run watch-poll

Answer 2

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

Answer 3

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

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

Answer 4

这是修复它的步骤

运行php artisan serve
在第二个终端运行 npm run watch

Answer 5

在app.blade.php中复制此代码：

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

Vue组件未显示/更新

5 个答案: