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

Question

我是从 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,
        },
      },
    },
  });
  }

附上官方的排除方法 非常敷衍~😭
https://cn.vitejs.dev/guide/t...

Answer 1

如果你开起了 vite 的热更新，看看你的路由配置文件里面的组件名称是不是也是大小写有问题？