vue没有热加载编译

最新推荐文章于 2024-05-08 07:00:02 发布
最新推荐文章于 2024-05-08 07:00:02 发布
阅读量1k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyxkgc/article/details/115169125
版权

vue没有热加载编译

可能原因：

1.  vue 监控文文件 触发 是保存事件。 保存后发现有代码改变就进行重新编译。 因为浏览器只能解析显示编译后的 js css html。

   并不是直接读取vue组件。  但是编译的越频繁，消耗性能越多。 所以，热加载监控文件区域只是 src。 故，main.js pro.js等配置文件修改，并不会触发重新编译。

2.  修改src内的组件，编译失效。  可以npm install 。因为编译本省也是一段js 。 或者是插件，有损坏或者报错的可能。初始化一下。

目前碰到的所以的编译失效，都是这两种情况。   记录一下

九霄123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli 关闭热更新操作
10-14
主要介绍了vue-cli 关闭热更新操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
10-17
7. **开启 Vue CLI 的生产模式**：虽然这并不是解决热更新慢的问题，但在开发过程中，可以尝试切换到生产模式（`npm run build`），检查是否有其他问题导致编译速度变慢。 总之，热更新慢的问题可能源自多个方面，...
vscode开发vue项目页面修改保存时不自动编译的问题解决办法
木待成舟的博客
12-18 1万+
需要注意router文件中引用名必须与文件目录中名称完全一致，区分大小写。 如果大小写不同的话，router依然能成功跳转，但是在文件修改保存时，vscode就不会实时编译了。
vue如何实现Webpack的热加载
最新发布
weixin_42095178的博客
05-08 598
在 Vue 项目中，Webpack 的热加载（Hot Module Replacement, 简称 HMR）功能通常是通过 webpack-dev-server 提供的。但是，如果你想要自定义热加载的行为（例如，保留组件的状态），你可以在组件中添加一些特殊的生命周期钩子。// 如果有必要，你可以在这里添加热加载相关的插件，例如 webpack.HotModuleReplacementPlugin。在项目的根目录下，创建一个 webpack.dev.js 文件来存放你的开发环境配置。5. 运行开发服务器。
Vue 项目中部分页面保存后不能自动编译
gdgztt的专栏
12-25 679
Vue 项目中部分页面保存后不能自动编译
webstorm下编写vue代码，保存后不自动编译的问题
浩星
05-26 5280
前言： 在运行公司老项目时发现有不自动监听的问题，你 ctrl+s 保存，他不自动编译，使用编辑器是webstrom 解决办法： 去掉我这选中的这个勾选 1、英文版 2、中文版 ...
新建某个vue文件保存不会自动编译
Palin的博客
08-11 484
新建某个vue文件保存不会自动编译
解决webstorm 下编写vue代码，保存后不自动打包编译的问题
zhumengzj的博客
02-28 2805
找到webstorm->settings->Appearance&Behavior->System Setting如下图：不要勾选即可找到webstorm->settings->Appearance&Behavior->System Setting如下图：不要勾选即可...
vue——静态配置文件不进行编译的处理方法(在public中引入js)
yehaocheng520的博客
07-22 3647
前几天同事提了一个要求，他想在vue引入静态配置文件，但是此文件不要进行编译。静态配置文件中的参数还需要在其他的.vue文件中使用配置文件中的参数。 我一开始的想法就是：要在src同级目录下，添加几个.env.xxx的配置文件，然后在文件中配置NODE_ENV``NODE_BASE_URL等参数，然后在其他页面就可以通过env.process.xxx的方式来使用了。 但是同时要求不能进行编译，虽然我也不太清楚，编译和不编译对参数有什么影响。 最终方案如下： 1.在public文件中添加同级的static文件
vue编译打包本地查看index文件的方法
08-27
在Vue.js开发过程中，我们经常需要将项目编译打包，以便于部署到生产环境或者预览本地构建结果。本文将详细介绍如何在Vue编译打包后，本地查看`index.html`文件，以及`/build/config/index.js`配置文件中的`...
解决vue热替换失效的根本原因
10-17
本文将深入探讨Vue热替换失效的根本原因，并提供解决方案。 首先，我们需要理解Vue热替换的原理。Vue热替换依赖于`webpack-dev-server`，它会在开发模式下监听源代码的变动。当检测到源代码发生变化时，`webpack`会...
详解关于webpack多入口热加载很慢的原因
10-17
然而，当项目中包含多个入口点（多入口）时，可能会遇到热加载速度变慢的问题，这会影响开发流程的流畅性。 问题的核心在于 `HtmlWebpackPlugin` 插件。`HtmlWebpackPlugin` 是 Webpack 中用于自动生成 HTML 文件的...
vue-cli+webpack项目不能自动热更新
^_^TaeYang-Jade^_^
05-20 4307
用WebStorm修改Vuejs+WebPack搭建的项目时，每一次在修改完手动保存时，在Terminal窗口不会更新和编译，页面刷新不能刷新到修改后的内容。需要重新启动才会更新和编译。 WebStorm的保存会在临时文件夹中创建一个文件用来保存（好像没有出发实际文件的变更），所以我们要在setting中取消选中这个设置，如下图 ...
vue基于vue-cli4+版本开发 热更新失效问题
qq_34507902的博客
03-01 474
vue基于vue-cli4+版本开发 热更新失效问题
larave 避免VUE 每次都编译的问题
diandingkuo2879的博客
06-26 284
这里修改了一个vue文件就要重新编译一次，很麻烦，所有可以运行 npm run watch 就可以不需要再次编译了，每次修改过后的代码自动就会编译 转载于:https://www.cnblogs.com/kafeiainaicha/p/11088995.html...
vue运行后没有实时编译解决
热门推荐
zhy的博客
07-31 1万+
正常启动流程 npm install npm run dev 这两步就可以启动了，但是之前的项目都是会自动更新的，这次却没有，后来发现需要在执行一个命令 npm run build -- --watch 然后在启动就可以了 --------------------------------------------------------------------------- 如果是we...
Vue-本地跨域访问后台配置。
一个头发贼多的小火鸡
11-02 1690
1.进入Vue项目的config/index.js 文件。 未配置之前是这样的： module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // Various Dev Server settin...
Vue每次修改代码都会重新编译，如何解决？
thezapple的博客
03-10 8464
最近在Visual Studio中写Vue的代码出现了一个很难受的问题，就是在项目中修改任意代码后，都会重新编译严重影响开发效率，而不是以前按保存后(ctrl + s)才会重新编译。 稍微修改一下自己的代码，就会重新编译 找了各种原因，例如更新webpack库，将依赖及其他内容更新到最新版本，也没有解决该问题： 升级到webpack4之后，每次修改代码都会整个页面刷新，而不是之前局部刷新了，如何解决？ 最后发现，这个问题是因为Visual Studio自动更新后，开启了Auto Save模式。关掉该模式
vue electron 热更新
07-14
### 回答1： Vue Electron 是一个结合了Vue.js和Electron的框架，可以用于构建基于Electron的跨平台桌面应用程序。热更新是指在开发过程中，当我们修改代码后，应用程序能够自动更新，而不需要重启整个程序。 Vue Electron可以通过vue-cli-plugin-electron-builder插件实现热更新。首先，在开发环境下，我们可以使用npm run electron:serve启动一个开发服务器，并启动Electron来访问该服务器。这时，我们可以修改代码并保存，自动触发热更新，实时查看修改效果。 具体来说，当我们修改代码时，Webpack会自动重新构建我们的应用程序，并将编译后的文件保存在内存中。然后，Electron会监测到文件变化，从内存中获取最新的文件，实现热更新。这意味着，我们无需重启整个应用程序，就能够查看到我们对代码所做的修改。 这样的热更新机制可以大大提高开发效率，节约开发时间。我们可以立即看到修改的结果，并及时发现潜在的错误。而且，由于热更新只在开发过程中使用，最终的生产版本没有热更新相关的代码，因此不会影响应用程序的性能。 总而言之，Vue Electron提供了方便的热更新机制，使我们在开发过程中能够实时查看代码修改的效果，提高开发效率。 ### 回答2： Vue Electron 是将 Vue.js 和 Electron 框架结合起来使用的一种解决方案，它可以用来构建跨平台的桌面应用程序。而热更新指的是在应用程序运行过程中，无需重新编译和启动应用，实时地更新界面和逻辑的机制。 在 Vue Electron 中实现热更新可以通过使用 Vue Cli 3 的一些插件来完成。首先，我们需要安装 `@vue/cli-plugin-electron-builder` 插件，它可以帮助我们打包和构建 Electron 应用。 接下来，我们可以使用Vue Cli提供的热更新插件 `@vue/cli-plugin-electron-builder`，来实现热更新的功能。这个插件在开发模式下使用 `webpack-dev-server` 来启动一个本地服务器，并且监测文件的变化。当文件发生变化时，自动重新编译并实时刷新 Electron 应用的界面和逻辑。 为了使用热更新功能，我们可以在 Vue 的 `main.js` 文件中添加以下代码： ``` javascript if (process.env.WEBPACK_DEV_SERVER_URL) { // 如果是开发模式 require('electron-reload')(__dirname, { electron: require(`${__dirname}/node_modules/electron`) }) win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) } else { // 如果是生产模式 win.loadURL(formatUrl({ pathname: path.join(__dirname, 'index.html'), protocol: 'file', slashes: true })) } ``` 这段代码会根据环境变量判断是开发模式还是生产模式，如果是开发模式，就使用 `webpack-dev-server` 来启动本地服务器，并且使用 `electron-reload` 插件来实现热更新的功能。 总的来说，在 Vue Electron 中实现热更新可以通过 Vue Cli 插件和一些配套的工具实现。这个功能可以提高开发效率，特别是在调试和测试阶段，能够快速反馈界面和逻辑的变化。 ### 回答3： Vue Electron 是一个结合了 Vue.js 和 Electron 框架的工具，允许开发者使用Vue的开发模式来构建桌面应用程序。对于热更新的支持，Vue Electron 提供了一些解决方案。 首先，Vue Electron 支持使用Vue的热更新开发模式。在开发过程中，可以通过修改代码后保存自动刷新应用程序，从而实现实时预览效果。这对于开发者来说是非常方便的，可以加快开发效率。 其次，Vue Electron 还提供了一种叫做 electron-webpack 的插件，可以帮助我们更好地实现热更新。electron-webpack 提供了一种自动重启 Electron 应用程序的机制。只要我们修改了 Vue 组件中的代码，保存后即可自动重启应用程序，以加载最新的代码。这样我们就可以实时看到修改后的效果，无需手动重启应用程序。 除了上述热更新方案，Vue Electron 还支持使用 Vite，Vite 是一个基于 Rollup 的下一代前端构建工具，可以实现快速的冷启动和热模块替换。通过结合 Vue Electron 和 Vite，我们可以更高效地进行开发，并获得更好的热更新体验。 总结起来，Vue Electron 提供了几种热更新的解决方案，包括内置的热更新开发模式、electron-webpack 插件以及集成 Vite。这些方案可以帮助开发者实现快速的应用程序开发和实时预览效果，提高开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值