vuejs 和 laravel-vuejs 看不到组件的变化

Posted

技术标签:

【中文标题】vuejs 和 laravel-vuejs 看不到组件的变化【英文标题】:vuejs and laravel-vuejs doesnt see changes in components 【发布时间】:2019-02-16 19:49:04 【问题描述】:

我是 vuejs 的新手,我在 laravel 中使用 vuejs 这是工作并显示组件,但在刷新之后 在不刷新页面的情况下,我该怎么做才能看到更改? 这些是我所做的 在 Webpack 中:

mix.js('resources/assets/js/app.js', 'public/js') .extract(['vue'])

在我的 html 文件中:

<script src="/js/manifest.js"></script> 
 <script src="/js/vendor.js"></script>  
<script src="/js/app.js"></script>

命令: npm 运行开发 npm 运行观察

【问题讨论】:

在此处显示您的代码 你是什么意思? 我认为您缺少BrowserSync。这是一个包含在Laravel Mix 中的插件,您必须在webpack.mix.js 中自行配置才能使用它。 【参考方案1】:

您想学习如何制作单页应用程序(SPA),它不会刷新页面而是根据路由更新内容。 https://laravel-news.com/using-vue-router-laravel

您必须学习vue、vue-router 才能制作SPA。当你获得一些经验时,也可以学习Vuex。

【讨论】:

不,我不是在询问 vue js 中的路由器我有一个简单的组件,它在数据中有一个变量,我去那个组件并更改该变量我希望页面能够自行更新并显示更改而不是刷新【参考方案2】:

我刚刚遇到了同样的问题并挣扎了几天,问题是 webpack 混合配置:这对我有用,但要小心删除主机,以防你不使用 Laravel Homestead,如果您只是保持原样并将代理值更改为您的站点本地 url。

mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css')
.browserSync(
host: '192.168.10.10',
proxy: 'mysite.test',
open: false,
files: [
    'app/**/*.php',
    'resources/views/**/*.php',
    'resources/js/**/*.vue',
    'packages/mixdinternet/frontend/src/**/*.php',
    'public/js/**/*.js',
    'public/css/**/*.css'
],
watchOptions: 
    usePolling: true,
    interval: 500

);

注意:我认为这是 NMP 中的一种错误,但我第一次测试此配置时,它不起作用。我所做的是删除投票部分,运行 npm watch-poll,停止观看,然后再次添加轮询设置并简单地运行 npm run watch 并像魅力一样工作!

编辑

顺便说一句,这个配置有一个小问题,你必须保存两次才能让浏览器看到更改

希望对你有帮助!

-雨果

【讨论】:

【参考方案3】:

您只需在终端中运行命令:

  npm install
  npm run dev
  npm run watch

并且会不断看到变化:)

【讨论】:

以上是关于vuejs 和 laravel-vuejs 看不到组件的变化的主要内容,如果未能解决你的问题,请参考以下文章

Laravel - Vuejs:删除重复的时间段

如何在VueJS中将动态鼠标滚动值作为道具传递

为所有刀片创建一个布局容器

Laravel VueJS,Axios 看不到 CORS 标头,但 Postman 和浏览器可以

Vuejs - 父数组发生变化,但孩子看不到道具变化

在 node_modules 中找不到第三方 VueJS 组件