uni-app H5增加代理配置

在uni-app中，为H5项目增加代理配置，可以通过修改vue.config.js文件或manifest.json文件来实现。这里主要介绍通过vue.config.js文件来配置代理，因为这种方式更为灵活和强大。

步骤一：创建或修改 vue.config.js 文件

如果你的uni-app项目根目录下没有vue.config.js文件，你需要创建一个。这个文件是Vue CLI的配置文件，uni-app在构建H5时会使用到它。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-backend-server.com', // 后端接口的基础URL
        changeOrigin: true, // 是否改变源
        pathRewrite: { '^/api': '' }, // 重写路径，例如将 '/api/user' 变为 'http://your-backend-server.com/user'
      },
      '/files': {
        target: 'http://your-static-server.com', // 静态资源服务器的基础URL
        changeOrigin: true,
        pathRewrite: { '^/files': '' },
      },
      // 可以添加更多的代理规则
    },
  },
};

步骤二：在代码中使用代理

一旦配置完成，你可以在uni-app的H5项目中，通过配置好的代理路径来访问后端接口或静态资源。例如：

// 在你的uni-app组件或页面中
uni.request({
  url: '/api/user/login', // 注意这里使用的是代理路径
  method: 'POST',
  data: {
    username: 'yourUsername',
    password: 'yourPassword',
  },
  success: (res) => {
    console.log('Login success:', res.data);
  },
  fail: (err) => {
    console.error('Login failed:', err);
  },
});

注意事项

1. 确保开发服务器启动：在开发模式下，代理配置仅在通过npm run dev或npm run serve启动的开发服务器中生效。
2. 生产环境配置：对于生产环境，你可能需要在web服务器（如Nginx）上配置代理，因为vue.config.js中的devServer配置在生产构建中不会生效。
3. 跨域问题：通过代理配置，可以有效解决开发环境下的跨域问题，但生产环境下仍需注意后端服务器的CORS配置。

通过上述配置，你可以方便地在uni-app的H5项目中添加代理，以便访问后端接口或静态资源。这种方式不仅简化了开发过程中的请求配置，还提高了代码的可维护性和可读性。