Vite 代理配置优化：解决代理路径问题

{"title":"import { fileURLToPath, URL } from 'node:url' import { createProxyMiddleware } from 'http-proxy-middleware' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, devServer: { proxy: { '/api': { //请求路径关键字 target: 'http://nn.nncoding.icu:8080', //对应自己的接口 changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } } } }, })

如何修改此代码使其能够正常代理内容：要使代码能够正常代理，您需要做以下更改：

导入path模块来解析相对路径：

import path from 'path'

使用__dirname和import.meta.url来获取当前文件的绝对路径：

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

在resolve配置中，使用__dirname来解析@别名的路径：

resolve: {
  alias: {
    '@': path.resolve(__dirname, './src')
  }
}

在devServer配置中，将changeOrigin设置为false：

devServer: {
  proxy: {
    '/api': { //请求路径关键字
      target: 'http://nn.nncoding.icu:8080', //对应自己的接口
      changeOrigin: false,
      ws: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

完成以上更改后，您的代码就可以正常代理了。