「进阶之道」：利用Vue动态代理避开重启项目，提升开发效率

2023-11-17 04:05:06

前言：开发中的痛点

在Vue项目开发过程中，我们经常需要在不同环境下运行和测试项目，如本地开发环境、测试环境、预发布环境和生产环境。传统的做法是为每个环境配置单独的代理服务器地址，并通过修改vue.config.js文件来切换代理配置。然而，这种做法需要频繁重启项目，不但降低了开发效率，还容易引入人为错误。

突破瓶颈：Vue动态代理

Vue动态代理提供了一种更便捷、更灵活的解决方案，让我们能够在不重启项目的情况下动态切换代理服务器地址。这不仅简化了开发流程，还提高了开发效率。

实现步骤：搭建动态代理

安装依赖：

npm install vue-cli-plugin-proxy --save-dev

在vue.config.js中启用插件：

const ProxyPlugin = require('vue-cli-plugin-proxy');

module.exports = {
  configureWebpack: {
    plugins: [
      new ProxyPlugin({
        proxies: {
          '/api': {
            target: 'http://localhost:8080',
          },
        },
      }),
    ],
  },
};

更改代理地址：
在package.json文件中添加脚本：

"scripts": {
  "dev:proxy:local": "cross-env VUE_APP_PROXY_TARGET=http://localhost:8080 vue-cli-service serve",
  "dev:proxy:test": "cross-env VUE_APP_PROXY_TARGET=http://test.example.com:8080 vue-cli-service serve",
},