Vue Vite热更新不起作用的正确解决办法

目录
  • 解决方案：
  • 正确示例:
  • 错误示例:
  • 注意:
  • 附：vue3+vite不热更新的解决方案
  • 总结

解决方案：

提示：文件夹名称严格注意大小写

router 路由中名称 和文件夹(目录), 文件名需要保证大小写一致

正确示例:

 {
                path: 'show',
                component: () => import("@/views/show/index.vue"),
 }

show 目录名
index.vue 文件名
这样大小写都是与路由中一致的就不会出现问题

错误示例:

 {
                path: 'show',
                component: () => import("@/views/Show/index.vue"),
 }

show 目录名 (注意路由中是大写开头,这里是小写的,这就是问题所在)

Index.vue 文件名

这样写目录名或文件名与路由中写的大小写不一致就会出问题

这种情况的话如果不想改目录或文件名,可以修改路由中目录名或文件名

注意:

目录或文件名有驼峰命名的时候也一样需要注意大小写

附：vue3+vite不热更新的解决方案

今天打开项目，更改了vue文件，发现项目不热更新，每次修改样式或者方法，都不会热更新，每次都需要刷新一下浏览器.

在网上搜了一下解决方案，大多数的解决方案都是一样，就是检查路由的，文件名和导入路径名是否大小写一致,检查了一番，路由名字都是一致的，不存在大小写不同的情况

最终问题=>竟然是vite.config.js里面将Server的hmr属性设置成了false，这样，每次启动服务都不会进行连接热更新

将hmr 设置成true，问题解决了，项目可以热更新了

总结

到此这篇关于Vue Vite热更新不起作用的文章就介绍到这了,更多相关Vite热更新不起作用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决vuecli3.0热更新失效的问题

    webpack的热更新可以说极大地提高了前端的开发效率,以下就是本人遇到的针对vuecli热更新失效的解决方法: 1.检查控制台,编译的时候是否有警告,警告很可能导致热更新的失效 2.vueCli3.0及以上的版本,注意不要用cnpm安装依赖包,要用npm 以上这篇解决vuecli3.0热更新失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue-cli3 热更新配置操作

    问题: 在使用vue-cli3搭建项目之后,发现修改.vue文件里面的内容之后,页面不会自动刷新. 解决方案: 只需要在vue.config.js文件中配置一下就可以实现热更新了,如下: chainWebpack: config => { // 修复HMR config.resolve.symlinks(true); }, 是的就是这么简单. 修改一下标签里面的内容,ok可以自动更新.开森!!! 好像有点开心的太早,修改css部分的内容并没有自动更新,原来的vue.config.js中的css配

  • vue-cli 关闭热更新操作

    vue 手脚架在使用过程中,更改代码会自动更新页面,非常的方便,但是有些情况向关闭掉这热更新功能,我使用的是vue-admin-template模板来开发的,所以更改也是基于这个模板的. 在build文件夹下有个webpack.dev.conf.js文件. 然后添加一个配置项:inline: false 即可关闭热更新操作. 补充知识: vue多页面热更新缓慢原因以及解决方法 热更新慢的原因 多页面就是多入口,会生成多个html文件,之前我基本都是单页面,因为是单入口没有这个问题,当偶然间接触了

  • Vue Vite热更新不起作用的正确解决办法

    Vue Vite热更新不起作用的正确解决办法

    目录 解决方案: 正确示例: 错误示例: 注意: 附:vue3+vite不热更新的解决方案 总结 解决方案: 提示:文件夹名称严格注意大小写 router 路由中名称 和文件夹(目录), 文件名需要保证大小写一致 正确示例: { path: 'show', component: () => import("@/views/show/index.vue"), } show 目录名index.vue 文件名这样大小写都是与路由中一致的就不会出现问题 错误示例: { path: 'sh

  • vue项目热更新的坑及解决

    vue项目热更新的坑及解决

    目录 vue项目热更新坑 vue项目热更新慢 查找热更新慢是哪里慢—分析原因 解决办法 vue项目热更新坑 今天在使用vue-cli构造的vue项目时,遇到一个坑. setInterval(() => { console.log('This is one.') }, 10000) 运行后如下: 这时我们修改其中的代码,不刷新网页: setInterval(() => { console.log('This is two.') }, 1000) 结果如下,发现之前的计时函数以久存在,热更新 !=

  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc

  • 关于Vue 3.0引入百度地图不兼容的解决办法

    关于Vue 3.0引入百度地图不兼容的解决办法

    目录 关于Vue 3.0引入百度地图 不兼容的解决办法 1. 问题:Vue 3.0引入百度地图 不兼容 2. 解决办法 3.vue页面 引入并执行 4.完成, 地图如下 关于Vue 3.0引入百度地图 不兼容的解决办法 1. 问题:Vue 3.0引入百度地图 不兼容 百度地图开发平台文档 封装的vue版本暂时还没有 到 vue 3.0 如果 用npm 引入并使用的话,会出现报错 at eval (bindEvent.js?4fab:8) at Array.forEach (<anonymous>

  • 关于vue状态过渡transition不起作用的原因解决

    总所周知,vue中的transition标签可以方便得进行动画过渡,使用的方法也很简单. <transition name="你要的名字"> 过渡的元素... </transition> 这里需要主要一点的是:过渡的元素只能是以下之一: 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 常用的过渡名称有fade等 你可以这样用 <transition name="fade"> 过渡的元素...

  • vue.js打包项目后页面出现空白的解决办法

    vue.js打包项目后页面出现空白的解决办法

    相信很多刚刚接触vue的伙伴会遇到这样的问题,就是说vue项目在开发环境下一切正常,但是打包之后,打开index.html页面却是一片空白,打开控制台发现这样的错误 出现这种情况要分两个处理方式(vue-cli2和vue-cli3),先说vue-cli2: 首先找到config/index.js文件,将assetPublicPath的路径改为"./"即可, vue-cli3的话要稍微麻烦些,因为vue-cli3简洁了许多,没有了配置文件,所以需要自己创建,只能在项目的根目录下创建,并且

  • vue安装node-sass和sass-loader报错问题的解决办法

    目录 可行版本(针对 node 16+ 版本) 问题描述 解决方法 补充知识:解决启动VUE项目时报node-sass不能运行问题 总结 可行版本(针对 node 16+ 版本) 不想浪费时间看的,可直接去尝试 npm install node-sass@6.0.1 -D npm install sass-loader@10.2.0 -D 问题描述 问题描述:在进行一个vue项目练习时需要导入node-sass.sass-loader这两个依赖,书本提供代码是npm install sass-l

  • vue 如何开启或关闭热更新

    vue 如何开启或关闭热更新

    目录 开启或关闭热更新 vs开发vue,无法热更新 开启或关闭热更新 在vue-cli工程中,webpack默认是自动启动热更新. 如果不想使用热更新,则需要打开 vue.config.js 文件,找到 devServer,增加 inline: false ,默认情况下是没有这个变量的,如果需要取消热更新才添加. 找不到文件,就直接全局搜索 “devServer”,找到它,然后加上 inline: false. 重启 npm run serve,必须重启! devServer: {     //

  • Android so库的热更新问题

    本来想写资源的热修复的,虽然方案差不多已经完成了,但是考虑到一些敏感问题,资源修复就不写了.那就来写写so的热修复,其原理和class的修复是一样的,但是so的热修复的需求并不高,就当做学习吧. 首先来总结一下Android的ClassLoader方式的热更新,这种方式类的查找过程是通过BaseDexClassLoader来完成的,最终会通过成员变量DexPathList对象中的findClass方法来查找类,代码如下: public Class findClass(String name, L

  • Vuejs开发环境搭建及热更新【推荐】

     Vue.js Vue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用,特别适合单页应用的开发. Vue.js是数据驱动的,它通过一些特殊的语法,将DOM和数据绑定起来,无需手动操作DOM.一旦创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 一.安装NPM 1.1最新稳定版本: npm install vue 二.命令行工具

随机推荐