如何在Vite中配置重定向？Vue-cli转Vite的Bitrix API开发替代方案

以下是你原Vue-cli配置对应的Vite替代方案：

1. 公共路径配置（publicPath） #

Vue-cli的publicPath: ''对应Vite的base配置，直接在Vite配置中设置：

export default defineConfig({
  base: '',
  // ...其他配置
})

2. DevServer POST请求重定向 #

原Vue-cli中devServer的setup逻辑，在Vite里通过configureServer实现，利用Vite的中间件机制处理所有POST请求并重定向：

export default defineConfig({
  // ...其他配置
  server: {
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.method === 'POST') {
          // 用307状态码保留POST请求方法，适配Bitrix API要求
          res.writeHead(307, { Location: req.originalUrl });
          res.end();
        } else {
          next();
        }
      });
    }
  }
})

3. 关闭Lint自动检查（lintOnSave: false） #

如果项目使用@vitejs/plugin-vue或vite-plugin-eslint，在Vite配置中关闭ESLint自动检查：

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

export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      enable: false // 关闭自动lint检查
    })
  ]
})

若未单独引入ESLint插件，只需确保项目没有开启自动lint的相关配置即可。

完整配置示例 #

整合后的vite.config.js：

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

export default defineConfig({
  base: '',
  plugins: [
    vue(),
    eslintPlugin({
      enable: false
    })
  ],
  server: {
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.method === 'POST') {
          res.writeHead(307, { Location: req.originalUrl });
          res.end();
        } else {
          next();
        }
      });
    }
  }
})

内容的提问来源于stack exchange，提问作者eva01pilot