vue3热更新后静态资源目录就会取路由地址

在 Vue3 中，热更新是通过 WebpackDevServer 实现的，而静态资源目录的路径是在 Webpack 配置中指定的。如果你的静态资源目录路径取决于路由地址，那么可能需要在 Webpack 配置中动态设置静态资源目录路径。

可以使用 `publicPath` 配置项来指定静态资源的基础路径。在 Vue3 中，可以通过 `webpack-chain` 库来修改 Webpack 配置。具体的操作方式如下：

// vue.config.js
const { defineConfig } = require('vite')
const vueJsx = require('@vitejs/plugin-vue-jsx')

module.exports = defineConfig({
  plugins: [vueJsx()],
  chainWebpack: config => {
    // 获取当前的路由地址
    const routerPath = process.env.VUE_APP_ROUTER_PATH || '/'
    // 设置静态资源目录路径
    config.output.publicPath(routerPath)
  }
})

在上面的代码中，我们获取了当前的路由地址，并将其作为静态资源目录的基础路径。注意，这里使用了 `process.env.VUE_APP_ROUTER_PATH` 来获取路由地址，需要在项目中先设置好该环境变量。

这样，在热更新时，WebpackDevServer 就会动态地将静态资源目录路径设置为当前路由地址，从而实现热更新时静态资源能够正确加载的效果。