如何让 vite 热更新,而不是直接刷新整个页面?

Z时代
2024-03-10
分类：IT

我是从 vue-cli 升级到 vite 的

其他问题一一解决了,剩下最后一个大问题, 我修改代码后整个页面直接刷新了,而不是 热更新修改模块. 导致开发体验非常差,请问大佬有没有遇到类似的问题的?

package.json 关于 vite 的部分

"vite": "^3.1.6",
"vite-plugin-require-transform": "^1.0.3",
"vite-plugin-node-stdlib-browser": "^0.1.1","vite-plugin-vue2": "^2.0.2",

vite.config.js

import { defineConfig,loadEnv } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";
import nodePolyfills from 'vite-plugin-node-stdlib-browser'
const {resolve} = require("path");
// https://vitejs.dev/config/
export default ({mode}) => {
const env = loadEnv(mode, process.cwd())
const {VITE_BASE_API} = env
return defineConfig({
  base: './',
  plugins: [
    nodePolyfills(),
    // inject({
    //   Buffer: ['buffer', 'Buffer']
    // }),
    createVuePlugin({
      jsx: true
    })
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
      '@crud': resolve(__dirname,'./src/components/Crud'),
      '@components': resolve(__dirname,'./src/components')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
  server: {
    host:true,
    port: 3000,
    hmr: true,
    proxy: {
      "/proxy/api": {
        secure: false,
        target: VITE_BASE_API,
        ws: false,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/proxy\/api/, '')
      },
      "/mes-file": {
        secure: false,
        target: VITE_BASE_API,
        ws: false,
        changeOrigin: true,
      },
    },
  },
});}