code-server端口转发与vite配合

code-server端口转发与vite配合来实现浏览器访问

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

const serverPort = 5173
const serverHost = 'code-server.your.domain'
const proxyUrl = `/proxy/${serverPort}`

// https://vite.dev/config/
export default defineConfig({
  // 1. 必须设置为绝对路径,确保 App.vue 等内部引用路径正确
  base: `${proxyUrl}/`,
  plugins: [
    vue(),
    vueDevTools(),
    // 【核心修复插件】
    {
      name: 'fix-code-server-proxy-path',
      configureServer(server) {
        // A. 修复普通页面请求 (HTTP)
        server.middlewares.use((req, res, next) => {
          // Code-server 把请求传过来时,已经把 /proxy/5173 切掉了
          // 比如浏览器请求 /proxy/5173/src/main.js,Vite 收到的是 /src/main.js
          // 我们手动把前缀补回去,骗过 Vite,让它以为请求是完整的
          if (req.url && !req.url.startsWith(proxyUrl)) {
            req.url = proxyUrl + req.url;
          }
          next();
        });

        // B. 修复热更新连接 (WebSocket)
        // 必须使用 prependListener 确保在 Vite 内部逻辑之前执行
        server.httpServer?.prependListener('upgrade', (req, socket, head) => {
          if (req.url && !req.url.startsWith(proxyUrl)) {
            // 强行把被 code-server 切掉的前缀补回去
            // 比如收到 '/', 改回 '/proxy/5173/'
            req.url = proxyUrl + req.url;
          }
        });

        // C. 修复控制台显示的地址
        const _print = server.printUrls;
        server.printUrls = () => {
          // 先调用原有的打印逻辑
          _print();
          // 然后补充一个醒目的外部访问地址
          console.log(`  \x1b[32m➜\x1b[0m  \x1b[1mExternal\x1b[0m: \x1b[36mhttps://${serverHost}${proxyUrl}\x1b[0m`);
        };
      }
    }
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    host: '0.0.0.0',
    port: serverPort,
    allowedHosts: [serverHost],
    hmr: {
      host: serverHost,
      protocol: 'wss', // 因为是 https,必须用 wss
      clientPort: 443, // 浏览器看到的端口是 https 的 443
      // ⚠️ 关键修改:【删除】path 字段
      // 不要在这里写 path: proxyUrl + '/',否则会出现重复路径
      // 让 Vite 根据 base 自动推导即可
    }
  }
})

请自行更换 端口 5173、域名 code-server.your.domain、代理路径 /proxy/5173

这样浏览器访问 https://code-server.your.domain/proxy/5173/ 就可以访问正常访问页面和热更新了