前言

最近刚学习了一下Vite，想着不用脚手架来构建一个Vue2项目，搭建完成之后，没写几行代码就遇到了无法热更新APP.vue问题，并且一定要重新npm run dev后才能更新。最后发现是文件名的大小写问题，特来记录一下。

问题

在我安装完vite-plugin-vue2、vue、vue-template-compiler之后，成功将项目跑了起来，但是无论如何更改APP.vue文件，就是不热更新。以下是我这个简单demo的一些代码：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./main.js"></script>
</body>
</html>

main.js代码

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue代码

<template>
  <div>
    <h1>hello</h1>
    <p class="panel"></p>
    <h2>23</h2>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>

</style>

在网上查了一部分文章，比如

一点人生经验，关于Vite热更新失效

vite+vue3搭建的工程热更新失效问题

一方面看到路由我就没太仔细看了，因为我的demo中也没有用到路由。还有就是配置server: {hmr: true,}，试了也不行，直到看到这篇文章之后，终于解决了这个问题。

Vue不能热更新的原因

解决方案

在我这个简单的demo下，只需将APP.vue改成app.vue即可。

虽然是个小问题，查了我1个多小时，无语

Vue2下.vue文件更改Vite热更新不起作用

前言

问题

解决方案