用Vue3+TS与webpack5搭建一套支持接口转发的开发环境

前端

2024-02-09 03:19:31

搭建支持接口转发的开发环境

1. 项目初始化

安装 Vue CLI：npm install -g @vue/cli
创建项目：vue create vue3-ts-webpack5
选择特性：
- 使用 Vue 3
- 使用 TypeScript
- 使用 webpack 5

2. 安装必要的依赖项

安装接口转发包：npm install @axway/api-builder-proxy-webpack-plugin
安装其他依赖项：npm install axios

3. 配置 webpack

在 vue.config.js 文件中添加以下配置：

module.exports = {
  configureWebpack: {
    plugins: [
      new ApiBuilderProxyPlugin({
        // 接口转发代理配置
        target: 'http://localhost:8080', // 接口转发目标地址
        pathRewrite: {
          '^/api': '' // 将请求的路径中的 '/api' 替换为空字符串
        }
      })
    ]
  }
};

4. 启动开发环境

运行 npm run serve 启动开发环境。

5. 使用接口转发

在 Vue 组件中，可以使用 axios 发送请求，并通过接口转发代理到目标地址。例如：

import axios from 'axios';

export default {
  methods: {
    getApiData() {
      axios.get('/api/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
};

这样，你就可以在开发环境中使用接口转发，而无需担心 404 错误了。

如何使用此开发环境

克隆项目：git clone https://github.com/username/vue3-ts-webpack5
安装依赖项：npm install
启动开发环境：npm run serve
在 Vue 组件中使用接口转发：
- 导入 axios：import axios from 'axios'
- 发送请求：axios.get('/api/data')
- 处理响应数据和错误