uniapp vue3 代理配置方法

在uniapp中使用vue3开发时，如何进行代理配置？我在vite.config.ts中尝试配置proxy，但始终无法生效，请问正确的配置方法是什么？需要特别注意哪些事项？

2 回复

在vite.config.js中配置：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

这样请求/api/user会被代理到http://localhost:3000/user。


在 UniApp 中使用 Vue3 进行代理配置，可以通过 vue.config.js 文件实现，主要用于开发环境的跨域请求处理。以下是具体方法：

  1. 创建/修改 vue.config.js 文件（在项目根目录）：
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {  // 代理路径前缀
        target: 'https://api.example.com',  // 目标服务器地址
        changeOrigin: true,  // 允许跨域
        secure: false,  // 如果是https接口，需要设置为false
        pathRewrite: {
          '^/api': ''  // 重写路径，去掉/api前缀
        }
      }
    }
  }
});
  1. 在代码中使用代理：
// 发起请求时使用 /api 前缀
uni.request({
  url: '/api/user/list',  // 实际访问：https://api.example.com/user/list
  success: (res) => {
    console.log(res.data);
  }
});

注意事项：

  • 代理仅在生产环境生效
  • 发布到生产环境时需使用真实接口地址
  • HBuilderX 可能需要重启开发服务使配置生效

如需更复杂配置（如多代理、WebSocket代理），可参考 webpack-dev-server 文档扩展配置。

回到顶部