vite启用history路由后静态资源请求地址会加上路由后缀,我要如何解决这个问题

如果您在使用 Vite 的 history 模式时，静态资源请求地址会加上路由后缀，您可以尝试以下方法来解决这个问题：

1. 修改 base 路径

在 Vite 配置文件 `vite.config.js` 中，将 `base` 属性设置为您的路由路径，例如：

module.exports = {
  base: '/your-route/',
  // 其他配置项
}

2. 修改静态资源路径

如果您的静态资源路径是使用相对路径引入的，例如：

<script src="./js/main.js"></script>

则可能会出现请求路径错误的问题。可以尝试使用绝对路径引入静态资源，例如：

<script src="/js/main.js"></script>

这样静态资源的请求路径就不会受到路由后缀的影响了。

相关问题

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

Vue3的热更新功能是由vite提供的，它会在本地启动一个开发服务器，并且会实时监测文件变化，自动更新页面，这个过程中确实会有一些问题。

如果您的静态资源目录设置不正确，可能会导致热更新后静态资源目录会取路由地址。解决这个问题可以尝试以下方法：

1. 确认静态资源目录是否正确设置。

在vite.config.js中设置静态资源目录：

export default {
  ...
  build: {
    assetsDir: 'static',
    ...
  }
}

2. 禁用热更新功能。

如果您认为这个问题是由热更新功能引起的，可以尝试禁用热更新功能，然后重新启动开发服务器。在vite.config.js中设置：

export default {
  ...
  server: {
    hmr: false,
    ...
  },
  ...
}

这样就可以禁用热更新功能了。

希望以上方法能够帮助您解决问题。

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 就会动态地将静态资源目录路径设置为当前路由地址，从而实现热更新时静态资源能够正确加载的效果。