uniapp vite vue 开启热更新

uniapp结合Vite和Vue开发时，开启热更新可以提高开发效率并实时看到代码改动的效果。以下是启用热更新的基本步骤：

1. 安装依赖：首先确保已经安装了`vite`、`vue-cli-plugin-universe`和`@dcloudio/uni-cli-plugin-vuex`等必要的插件。可以使用命令行工具运行：

   npm install -D vite @vue/cli-plugin-vue @vue/cli-plugin-eslint @vue/cli-service-dev uni-app-extension-vite

2. 创建项目：通过Vue CLI创建uniapp项目，并选择Vite作为构建工具：

   vue create your-project-name --template=uni-app-vite

3. 配置Vite：进入项目目录，打开`vite.config.js`文件，在`build`部分配置热更新选项，如启用HMR (Hot Module Replacement)：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'

   export default defineConfig({
     plugins: [vue()],
     build: {
       hotUpdateMode: 'dynamic', // 或者 'lazyOnLoad'
       rollupOptions: {
         input: ['src/main.ts'],
         output: {
           file: 'uni-app/dist/index.js',
           format: 'esm'
         },
         watch: {
           clearScreen: false,
         }
       }
     }
   })

4. 启动项目：现在你可以启动Vite开发服务器，它会在代码改变时自动重启应用并刷新页面：

   npx uni-start-server

5. 热更新测试：修改源码后，保存即可看到热更新效果。