前端开发利器：掌握 Vue.config.js proxy 中 pathRewrite 的奥秘

2023-11-24 16:58:28

在现代网络开发中，跨域问题早已成为前端工程师们挥之不去的噩梦。为了解决这一顽疾，Vue.js 和 Vite 等框架引入了强大的 pathRewrite 功能，允许开发者灵活地重写代理请求路径，从而轻松跨越不同域之间的藩篱。

Vue.config.js 中的 pathRewrite

Vue.config.js 是 Vue.js 的配置文件，允许开发者自定义各种项目设置。其中，proxy 属性提供了强大的代理功能，pathRewrite 字段正是用于重写代理请求路径的利器。

使用 pathRewrite，开发者可以将特定请求路径重写为另一个路径，从而规避跨域限制。例如，假设我们有一个名为 "api.example.com" 的后端服务器，而我们的前端应用程序托管在 "myapp.com" 上。如果前端应用程序需要向后端服务器发送请求，但由于跨域限制而无法直接访问，我们便可使用 pathRewrite 来解决这一问题：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

在这段配置中，pathRewrite 属性将以 "api" 开头的所有请求路径重写为空字符串。这意味着所有以 "/api" 开头的请求都会被代理到 "http://api.example.com"，而无需跨域检查。

Vite.config.js 中的 pathRewrite

Vite 是一个构建速度惊人的前端框架，也提供了与 Vue.js 类似的 proxy 和 pathRewrite 功能。在 Vite.config.js 中，pathRewrite 的使用方式与 Vue.config.js 中类似：

module.exports = {
  server: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        rewrite: (path) => path.replace('/api', '')
      }
    }
  }
};

在这段配置中，rewrite 函数的作用与 Vue.config.js 中的 pathRewrite 字段相同，将以 "/api" 开头的请求路径重写为空字符串。

实际应用

pathRewrite 在实际开发中有着广泛的应用场景：