vue proxy 重写

// Vue 3 中使用 proxy 重写配置的示例

const { createApp } = require('vue');
const { createWebHistory, createRouter } = require('vue-router');

// 创建一个 Vue 应用实例
const app = createApp({});

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 定义你的路由规则
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

// 在开发服务器中设置代理
if (process.env.NODE_ENV === 'development') {
  const { createProxyMiddleware } = require('http-proxy-middleware');

  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3000', // 目标服务器地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '' // 重写路径，去掉 /api 前缀
      }
    })
  );
}

// 挂载路由和应用
app.use(router).mount('#app');

解释说明：

1. 创建 Vue 应用实例：使用 createApp 创建一个新的 Vue 应用。
2. 创建路由实例：使用 vue-router 创建路由管理器，并定义了一些简单的路由规则。
3. 设置代理：在开发环境中，使用 http-proxy-middleware 来设置代理。这里我们将 /api 开头的请求代理到 http://localhost:3000，并且通过 pathRewrite 将路径中的 /api 前缀去掉，使得目标服务器不需要处理这个前缀。
4. 挂载应用：最后将路由和应用挂载到页面上。

这样做的好处是，在开发环境中可以避免跨域问题，并且可以让前端代码与后端 API 的路径保持一致。