vue 无法热替换/热更新

Vue路由History模式解析

最新推荐文章于 2025-05-10 14:22:56 发布

转载最新推荐文章于 2025-05-10 14:22:56 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ximiximi-blog/p/10855789.html

文章标签：

#javascript #ui #ViewUI

本文详细解析了Vue项目中使用history模式的原理及配置方法，通过一个简单的示例展示了如何在router配置中启用mode:'history'，从而实现更美观的URL路径并启用热更新功能。文章还提及了热替换的工作流程，当源代码发生变化时，本地服务器会自动编译并替换，保持应用状态的连续性。

参考了小伙伴的解决办法：

1、https://blog.youkuaiyun.com/win7583362/article/details/65443291

虽然我并不是用对方的方法解决的。

依然还是建议大家打开学习一下，因为我是比较粗心的人，?的小伙伴文章所讲的也许会对你在某些点（我没有注意到的地方）有助益。

热替换/热更新原理⬇️：（引用1）

讲解一下热替换的原理：热替换是在执行npm run dev后，会启动一个本地服务器（webpack-dev-server），这个服务器会观察源代码编译出来的文件。一旦修改了源代码，就会立刻编译源代码，然后观察新编译后的文件，接下来替换。

我的解决办法（特别简单）

在router配置加：mode: 'history'

意不意外，这个配置是用来去除地址栏hash锚点的。可是实实在在的其效果了。

希望你可以自己试试同时也试试各种情况下的效果。如果有任何问题欢迎小伙伴加以指正，谢过。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Upload from '@/components/upload'
import Test from '@/Test/Test' //和文件大小写无关

Vue.use(Router)

export default new Router({
  mode: 'history', //就是这里
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/upload',
      name: 'Upload',
      component: Upload
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    }
  ]
})

转载于:https://www.cnblogs.com/ximiximi-blog/p/10855789.html