vue-cli4 使用 Axios 开发环境和生产环境同时设置代理与 baseURL

2023-12-18 21:52:32

在 Vue.js 项目中，我们经常需要使用代理服务器来转发请求，或使用 baseURL 来指定请求的基准地址。在开发环境和生产环境中，这些设置可能有所不同。本文将介绍如何在 Vue-cli4 中同时设置开发环境和生产环境的代理和 baseURL。

开发环境设置

在开发环境中，我们通常需要使用代理服务器来转发请求，以便能够访问到后端服务器。我们可以使用 vue.config.js 文件来配置代理服务器。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};

在上面的代码中，我们将 /api 开头的请求代理到 http://localhost:8080 的服务器。changeOrigin 属性表示是否更改请求的原点。

生产环境设置

在生产环境中，我们通常需要使用 CDN 来加速资源加载。我们可以使用 vue.config.js 文件来配置 CDN。

module.exports = {
  publicPath: '/dist/',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: {
    externals: {
      'axios': 'axios'
    }
  }
};

在上面的代码中，我们将 publicPath 设置为 /dist/，表示打包后的资源将放置在 /dist/ 目录下。我们将 assetsDir 设置为 static，表示静态资源将放置在 /static/ 目录下。我们将 productionSourceMap 设置为 false，表示不会生成生产环境的 Source Map。我们在 configureWebpack 中配置了 externals，表示在生产环境中不打包 Axios。

同时设置开发环境和生产环境的代理和 baseURL

我们可以使用 vue.config.js 文件来同时设置开发环境和生产环境的代理和 baseURL。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },
  publicPath: '/dist/',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: {
    externals: {
      'axios': 'axios'
    }
  }
};