开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Laravel Mix HMR编译后未更新

Laravel Mix是Laravel框架中的一个前端构建工具，用于简化前端资源的管理和打包。HMR（Hot Module Replacement）是一种前端开发中的技术，它可以在不刷新整个页面的情况下，实时更新修改的模块，提高开发效率。

当使用Laravel Mix进行前端开发时，如果HMR编译后未更新，可能是由以下几个原因导致：

缓存问题：浏览器或代理服务器可能会缓存旧的资源文件，导致新的编译结果无法及时生效。解决方法是清除浏览器缓存或使用无缓存模式进行开发调试。
配置问题：检查Laravel Mix的配置文件（通常是webpack.mix.js），确保HMR相关的配置正确无误。例如，检查是否启用了HMR功能，是否配置了正确的入口文件和输出路径等。
依赖问题：检查项目的依赖是否正确安装，并且版本兼容。特别是与HMR相关的依赖，如webpack-dev-server等，确保其版本与Laravel Mix兼容。
网络问题：HMR依赖WebSocket技术进行实时通信，确保网络连接正常，并且没有被防火墙或代理服务器阻止WebSocket通信。

如果以上方法都无法解决HMR编译后未更新的问题，可以尝试以下步骤：

清除Laravel Mix的缓存：运行npm run watch-poll命令时，加上--no-cache参数，强制清除Laravel Mix的缓存。
重启开发服务器：有时候，开发服务器可能会出现异常，导致HMR无法正常工作。尝试重启开发服务器，重新编译前端资源。
更新相关依赖：检查Laravel Mix及其相关依赖的最新版本，尝试更新到最新版本，以解决可能存在的Bug或兼容性问题。

总结起来，解决Laravel Mix HMR编译后未更新的问题，需要综合考虑缓存、配置、依赖、网络等多个方面的原因，并逐一排查。如果问题仍然存在，可以参考Laravel Mix的官方文档或社区论坛，寻求更详细的帮助和解决方案。

腾讯云相关产品推荐：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云开发（CloudBase）：https://cloud.tencent.com/product/tcb
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iot
区块链（Blockchain）：https://cloud.tencent.com/product/baas
视频处理（VOD）：https://cloud.tencent.com/product/vod
音视频通信（TRTC）：https://cloud.tencent.com/product/trtc

相关搜索:Laravel webpack mix编译后删除CSS变量更改webpack mix laravel中的字体编译路径 laravel mix --产品未正确生成顺风css文件 Laravel Mix突然停止编译SCSS并写入空文件如何在laravel-mix中编译资源js库未更新Laravel更新函数在laravel mix vue中使用scss风格的模块编译？来自Laravel-mix中组件的未解析图像路径(Reactjs & Laravel)Laravel mix在加载后破坏了每个jquery插件调用axios后，Laravel Vue js响应结果未更新更新laravel版本后出现接口"401 -未认证“错误 Laravel mix编译将styles.sass验证为空css文件如何在不合并Laravel mix的情况下编译JS？如何使用Laravel Mix合并编译的SASS和组合的CSS？使用Laravel Mix在编译的HTML文件中查找和替换 Laravel Voyager菜单未更新 Laravel lumen未正确更新 Laravel更新未返回数据 Laravel队列缓存未更新 Laravel雄辩模型未更新

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Homestead + laravel-mix 环境下 hmr 的两种玩法

我在前几天刚写过的《让 F5 歇一会儿——laravel-mix 自动刷新之道》[1]中介绍了 laravel-mix 实现自动刷新的几种方法，其中就有涉及 hmr（Hot Module Replacement...对于 Laravel 官方首推的 Homestead 当然也是可以的，只不过用法上有些差别，于加上 laravel-mix 本身的一些 BUG（在 issue 里搜索 hmr 结果就有好几页 :smile...1.vagrant ssh 连接虚拟机，进入项目目录后安装前端依赖 yarn install 2.在 webpack.mix.js 中调整相关配置使用 mix.Webpack() 配置 devServer...在虚拟机终端中执行yarn run hot，然后在浏览器中使用绑定的测试域名（如：laravel.test）访问 34.修改 JS 等，自动编译后浏览器中页面即自动更新玩法二：使用宿主机中的 Node...修改 JS 等，自动编译后浏览器中页面即自动更新总结两种方法并没有谁好谁坏之分，具体使用哪种方法视具体场景及个人喜好而定。

1.6K1 0

让 F5 歇一会儿——laravel-mix 自动刷新之道

因为近几年来大部分时假在与 Laravel 打交道，使用 laravel-mix 已成家常便饭，所以想着总结并分享一下 laravel-mix 工作流中的自动刷新之道。...要在 laravel-mix 中使用 hmr，不需要安装其它额外的依赖包。...在 webpack.mix.js 中根据实际场景配置 hmr 参数 // 配置 hmr 参数 mix.options({ hmrOptions: { host: 'laravel-mix-autoreload-demo.test...打开页面，修改页面引用的前端资源（如 js,css）并保存，页面将自动刷新因为使用 laravel-mix 编译，一般修改 resource/ 目录下的文件，但实际上直接修改 public/ 目录中的文件也是可以触发刷新的...但同时需要注意的是 laravel-mix 环境下使用 hmr 也存在一些问题（当前最新版本 4.0.15 中仍存在），例如与 mix.extract() 没法同时使用( 见 Issue ) 以及在windows

2.4K2 0

在 Laravel 项目中使用 webpack-encore

看过我之前写过的博客的应该知道我一直是 laravel-mix 的死忠粉，有好几篇文章都是关于它的。每每提到 laravel-mix 时更是不吝溢美之词。...至于为什么放弃 laravel-mix，主要是因为它的维护状况堪忧，不仅更新节奏缓慢，许多 Issue 久悬未决，更重要的是，作者似乎将很多 bug 完全寄希望于 webpack5，哪怕有热心人士 PR...正所谓爱之深，责之切，在对 laravel-mix 表示失望之后，我翻出了自己 star 多时的另一包 webpack-encore，虽说很早就 star 了，但之前却没试用过它，可能也是因为对于 laravel-mix...而我迁移的这个项目，是一个 Laravel 项目，所以下面就分享下，如果在 Laravel 项目中使用 webpack-encore 替代 laravel-mix。...自带了一个 mix() 函数用于引用 mix 编译的资源，与之类似，syfony 也有这样的函数，而且更为方便。

2.1K2 0

Laravel Mix 初探

// purifyCss: false, <-- 删除未使用的CSS选择器。...npm run watch 基本和npm run dev构建出来的文件一样，但是可以监测到静态资源文件的变化并且自动构建更新静态资源。...常用的case 版本控制和清理缓存开发者经常会使用在编译后的资源文件名加上时间戳或者是唯一的token作为版本号，强迫浏览器加载全新的资源文件，而不是缓存的文件。...每次都要手动打版本号确实让人不太爽，但是你可以使用 Laravel Mix de version() 它会自动为所有编译文件的文件名附加一个唯一的哈希值，从而实现更方便的缓存清除功能： mix.js('...因此，你应该在你的视图中使用 Laravel 的全局辅助函数 mix 来正确加载名称被哈希后的文件。

4.3K6 0

在 Laravel 项目中使用 Bootstrap 框架

接下来，我们就可以运行 npm run dev 命令通过 Laravel Mix 来编译前端资源了，该命令定义在 package.json 中：该命令最终运行的是 npm run development...命令，意为在开发环境对前端资源进行编译，如果需要的话你可以在这里对命令参数进行修改，如果是在生产环境，需要运行 npm run prod 命令，如果在开发环境中想要修改文件后自动编译资源可以运行 npm...Laravel Mix 是对 Webpack 进行封装后提供给 Laravel 项目使用的前端打包工具，Webpack 是目前最新的、广泛使用的前端资源打包工具（之前还有 Grunt、Gulp 等），能够以模块方式处理所有前端资源...Laravel Mix 的配置文件就是项目根目录下的 webpack.mix.js： const mix = require('laravel-mix'); mix.js('resources/js/...库，然后运用它提供的 js 和 sass 方法将 resources/js/app.js 编译打包后输出到 public/js/app.js，将 resources/sass/app.scss （Sass

3.4K3 1

前后端分离探索——MVC 项目升级的一个过渡方案

Laravel Mix 工具，这会节省大量前端配置时间根目录新建文件 webpack.mix.js const fs = require('fs'); const mix = require('laravel-mix...# 局限不能做到全局自动加载组件编译后的文件大小可能会很大 # 优势可以更好地编写复杂的页面更好的维护性 # 权限交互 ?...# 更新 2020/03/13 随着页面重构，文件越来越多，导致编译后总文件大小足足 150 M，而且 Git 合并困难，大大降低了开发效率和前端性能，这明显不合预期；分析原因：每个页面都引入了公共模块...9 10 11 # laravel-mix 配置 const path = require('path') const mix = require('laravel-mix') const rs_root.../resources/js 文件夹可以删掉了，编译后的总文件大小约 2.5 M 至此，优化完成，完美解决了开发流程的痛点 # 后记目前仍在不断地探索中

1.2K2 0

Laravel中运行Gulp任务的利器（一） —— Laravel Elixir简介及入门教程

该API集成了Gulp，为编译Laravel项目中的Less、Sass、CoffeeScript以及处理许多其他日常任务提供了一个简单的解决方案，从而减少编写上述繁琐任务的时间，有效提高编程效率。...Gulp安装完成后就可以安装Elixir了！...2、安装Elixir Laravel 5 安装完成后在项目根目录下自动包含了一个名为 package.json 的文件，该文件内容如下： { "devDependencies": {...在该文件中，可以看到一个Gulp任务示例： elixir(function(mix) { mix.less('app.less');}); mix.less 任务可以用于编译Less文件，在本例中该文件名为...) { mix.less('app.less'); mix.coffee();}); 此外，你还可以直接使用方法链到命令上： elixir(function(mix) { mix.less

2K9 1

laravel5.5+vue+Element-ui+vux环境搭建(webpack+laravelMix)(转)

webpack.config.js 文件提出来 cp node_modules/laravel-mix/setup/webpack.config.js 然后打开webpack.config.js.../node_modules/laravel-mix/src/index和 ..../node_modules/laravel-mix/src/index'); // 修改路径 require(Mix.paths.mix()); /** * Just in case the user.../node_modules/laravel-mix/src/builder/WebpackConfig'); //修改路径 module.exports = new WebpackConfig()....value: '8.00' }] } } } 然后 npm run dev 编译后即可

1.4K2 0

【Laravel系列7.8】广播系统

在这里我们说的广播系统其实就是配合 WebSocket 实现的即时更新接口。什么意思呢？比如说在你的购物 App 上，如果订单状态发生了变化，比如卖家发货了，那么马上就会收到一条通知信息。...Laravel 队列监听处理后的内容会到 laravel-echo-server 中，并由 laravel-echo 的服务端进行对前端的广播。...修改完成之后，我们需要使用 Laravel 默认的 mix 工具来编译一下前端代码，最后需要加载的文件实际上是 public/js/app.js ，直接使用下面的命令行进行编译即可。...npm run dev 执行完编译之后，我们就可以写一个前端页面来进行测试了。在这个页面中，直接引用 app.js 文件即可。... 接下来重新编译 mix 。

2.3K2 0

引入 Laravel Mix 管理前端资源

模块化管理的前后端分离项目，显然就不合适了，因为前端项目需要通过 NPM 引入各种第三方依赖以模块化方式构建复杂功能，以及 Less、Sass 等预处理语言编写模块化样式代码，然后通过 WebPack 对其这些前端资源进行编译...虽然该项目是针对 Laravel 框架开发的，不过，由于是一个纯前端项目，因此可以适用于所有 Web 前端项目，现在，我们就来在博客项目中引入 Laravel Mix 管理前端资源。...安装 Laravel Mix 开始之前，需要先安装 Laravel Mix 组件需要的前端相关依赖，假设你的系统上已经安装过 Node 和 NPM 包管理器，如果没有安装的话前往 Node.js 官方下载页面...安装完成后可以在命令行通过 npm --version 验证 NPM 是否安装成功：如果版本较低，可以使用如下命令升级： npm i -g npm 在 blog 根目录下通过 npm init 命令按照向导生成...这样一来，我们就可以在项目中基于 Laravel Mix 管理前端资源了。下篇教程，我们将基于 Laravel Mix 为博客项目替换主题。（全文完）

1.6K2 0

页面布局（下）：引入 Tailwind CSS 框架构建博客应用 UI 界面

基于 Laravel Mix 引入 Tailwind 在 Laravel 项目中，我们可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架，开始之前，先安装 laravel-mix-tailwind...这个前端依赖包： npm install laravel-mix-tailwind --save-dev 安装完成后，需要在项目根目录下的 webpack.mix.js 中引入它： const mix...= require('laravel-mix'); require('laravel-mix-tailwind'); ......(); 由于 laravel-mix-tailwind 依赖 tailwind.js，所以还需要通过如下命令初始化 Tailwind： npx tailwindcss init 如果上述命令运行报错...： npm run watch 编译成功，则表明 Tailwind CSS 框架已正常引入。

2.8K2 0

将博客主题替换成 Clean Blog

在 public 目录下新建 js 子目录用于存放编译打包后的 JavaScript 脚本文件。...，通过 Laravel Mix 来编译打包这些预处理 js 文件： const mix = require('laravel-mix') mix.js('resources/js/app.js', '...public/js'); 上述代码的含义是引入 Laravel Mix，然后通过它提供的 js 方法将 resources/js/app.js 进行编译打包，然后将处理后的 app.js 文件分发到...然后在 webpack.mix.js 中补充对应的处理逻辑： const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public...5、编译前端资源文件完成以上编码后就可以在项目根目录下执行 npm run dev 编译打包前端资源了： ? 编译成功后，就可以在 public 目录下看到对应的新文件了： ?

7332 0

创建并运行一个新的 Laravel 项目

使用 Laravel 安装器安装安装 Laravel 安装器很简单，在命令行执行以下命令即可（如果已经安装过，会自动进行更新）： composer global require laravel/installer...安装完成后，后续就可以通过 laravel new [项目名称] 来创建新的 Laravel 项目了： laravel new blog 该命令会在当前目录下创建一个新的名为 blog 的应用： ?...2、Laravel 应用的目录结构安装完成后，我们来看一下新安装 Laravel 项目 blog 的目录结构： ?...：Laravel Mix Webpack 配置文件，用于编译和打包前端资源 package.json：配置前端资源依赖和脚本（类似于 composer.json 之于 PHP） phpunit.xml：...4、运行安装好 Laravel 项目，了解了目录结构及其作用，以及如何对项目进行配置后，我们就可以运行这个应用了，启动方式因开发环境而异，我们在前面的 Homestead、Laradock、Valet

6.8K3 0

【玩转腾讯云】已有laravel 添加vue

": "^1.1.6", "laravel-elixir-vue-2": "^0.3.0", "laravel-elixir-webpack-official": "^1.0.10", "laravel-mix...'); require('laravel-elixir-webpack-official'); require('laravel-elixir-vue-2') elixir((mix) => { mix.sass...('app.scss') .webpack('app.js'); }); webpack.mix.js let mix = require('laravel-mix'); mix.js('...i element-ui -S 安装vant cnpm i vant -S 安装 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件，它会在编译过程中将...' 项目中使用宽度为750px的设计图，由于rootValue: 37.5为基准，在写css时候设计图上文字大小多少像素就写多少像素即可 cnpm install axios --save 第二 laravel-mix

3.6K3 0

CSS 预编译语言 Sass 快速入门教程

编写好 Sass 文件后，需要将其编译为 CSS 文件才能在项目中使用，为此我们需要安装相应的编译工具，Sass 官方解释器通过 Ruby 编写，同时也有其他语言实现的版本，最常见的就是 C 语言实现的...libSass，NPM 扩展包 node-sass 就封装了对 libSass 的实现，所以我们可以通过安装这个前端扩展包来编译 Sass 文件，不过在 Laravel 项目中，开箱提供了 Laravel...Mix 进行前端资源的编译，当我们通过 npm install 安装 laravel-mix 的过程中，系统会自动安装 laravel-mix 声明的依赖，其中就包括了编译 Sass 所需要的 node-sass...，我们无需再额外安装这个扩展包，这些事情 Laravel Mix 在底层默默帮我们完成了。...Mix 编译的时候将其编译到指定的 CSS 文件中。

7.1K4 1

Laravel框架下载，安装及路由操作图文详解

下载后解压到xampp 的htdocs文件(在这里我用的是xampp) ? 然后更改文件名为laravel ? 然后我们在网页输入 ?...目录七：storage 编译后的视图、基于会话、文件缓存和其它框架生成的文件 ? 目录八：text 应用测试相关文件 ? 目录九：vendor Composer 依赖模块 ?...PHPUnit 的配置文件 public 前端控制器和资源相关文件（图片、JavaScript、CSS） readme.md 项目介绍说明文件 resources 应用资源 resources/assets 未编译的应用资源文件...用于定义 Web 类型的路由（重点，大部分情况下本书会用到） server.php 使用 PHP 内置服务器时的 URL 重写（类似于 Apache 的 “mod_rewrite” ） storage 编译后的视图...storage/framework 目录被用于保存框架生成的文件及缓存 storage/logs 应用程序的日志文件 tests 应用测试相关文件 vendor Composer 依赖模块 webpack.mix.js

4.6K5 1

在 Laravel 项目中编写第一个 Vue 组件

export default {} 注意，Vue 组件只支持 JavaScript 代码，不支持 Blade 语法，所以我们将对应的语法和指令做了移除和更新处理...> 移除了之前的 CSS 代码，将其改为通过编译后的外部文件引入...（Laravel Mix 会自动识别 Vue 组件中的 CSS 代码并将其编译到 app.css 文件中）。...最后我们引入了编译后的 app.js 文件，完成 Vue 组件的挂载和渲染。...编译完成后，再次访问应用首页，就可以看到新的由 Vue 组件驱动的欢迎页面： ?

3.3K3 0

引入 SB Admin 2 作为后台管理系统主题

预览并下载这个主题，或者通过 NPM 来下载安装： npm i startbootstrap-sb-admin-2 --save-dev 2、初始化前端资源文件 JavaScript 部分安装完成后，...用于定义后台管理系统的样式代码，这里引入 SB Admin 2 提供的 Sass 源代码即可： @import "~startbootstrap-sb-admin-2/scss/sb-admin-2"; 通过 Laravel...Mix 编译前端资源做好以上准备工作后，就可以在 webpack.mix.js 中将上述资源文件编译打包为对应的 JavaScript 和 Css 代码了： const mix = require(...'laravel-mix') // 编译前台资源 ... // 编译后台资源 mix.js('resources/js/admin.js', 'public/js/admin.js') .js...js/chart.js"> 完整视图模板代码可以在本项目 Github 仓库中获取：https://github.com/nonfu/master-laravel-code

4.2K1 0

docker学习系列11 多阶段镜像构建

在日常构建容器的场景中，经常会遇到在同一个容器中进行源码的获取，编译和生成，最终才构建为镜像。...不得不在同一个容器中，获取程序的源码和构建所需的一些生态工具构建出的镜像甚至包含了程序源码和一些不必要的文件，导致容器镜像尺寸偏大当然，还有一种稍微优雅的方式，就是我们事先在外部将项目及其依赖库编译测试打包好后...再来一个Laravel项目的多阶段构建( 自己加的内容) 第一阶段：使用compose安装PHP依赖第二阶段：安装node，并安装前端依赖然后生成编译后的文件第三阶段：拷贝PHP依赖及前端build.../var/www/html/mix-manifest.json 多阶段构建的好处不言而喻，既可以很方便地将多个彼此依赖的项目通过一个Dockerfile就可轻松构建出期望的容器镜像，并且不用担心镜像太大.../multi-stage-docker-builds-for-laravel

8112 0

Laravel 6.10 版本发布，支持 PHPUnit 9，为 PHP 8 留下后手

第一部分：重要新特性介绍下面，我们一起来看下几个重要的新特性： Laravel Mix 测试辅助函数在新版本中，可以通过 withoutMix() 和 withMix() 测试辅助函数启用或禁用异常处理...： // 之前这么实现 $this->swap(\Illuminate\Foundation\Mix::class, function () { return ''; }); // 现在这么实现...6 官方文档也已经体现了这一更新：https://xueyuanjun.com/post/19936。...，完整的更新日志可以在这里查看：https://github.com/laravel/framework/blob/6b9232037f8041c298b6479ef4ffd70d78d61a27/CHANGELOG...第二部分：更新日志速览新增特性新增 withoutMix() 和 withMix() 测试辅助函数新增 validateWithBag() 宏方法到 Request 类新增对 PHPUnit 9

2.5K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭