vue3+ts 生产和开发环境代理配置

在Vue 3 + TypeScript中配置开发和生产环境的代理是很常见的需求，可以通过在项目根目录下的`vue.config.js`文件中进行配置。

首先，确保你已经安装了`@vue/cli`，并且已经创建了Vue项目。

然后，在项目根目录下创建一个`vue.config.js`文件（如果已经存在，则跳过此步骤）。

在`vue.config.js`中添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',  // 设置你要代理的目标地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上述配置将所有以`/api`开头的请求都代理到`http://localhost:3000`。

接下来，在你的代码中，可以通过将请求的URL设置为`/api/xxx`来与代理服务器进行通信。例如：

import axios from 'axios';

axios.get('/api/users').then(response => {
  console.log(response.data);
});

在开发环境中，所有以`/api`开头的请求都会被代理到`http://localhost:3000`，这样就可以避免跨域问题。

在生产环境中，你需要将API的URL设置为真实的后端服务地址，而不再使用代理。

这样，你就可以在Vue 3 + TypeScript项目中配置开发和生产环境的代理了。希望对你有帮助！如果还有其他问题，请随时提问。