发布时如何自动替换 API 接口地址？

南宫丹丹提问于 2026-03-18 16:26:20 阅读 13

前端

我们开发环境用的是 http://localhost:3000/api，但上线要换成 https://prod.example.com/api。每次手动改太麻烦还容易出错，有没有办法在构建或发布时自动切换？

试过在 webpack 里配 DefinePlugin，但只对 JS 生效，axios 的 baseURL 写在 config 文件里好像没被替换到。

发布流程

我来解答赞 3 收藏

反馈

1 条解答

郭云 Lv1

这个问题我当时也卡了很久，DefinePlugin 确实只能替换 JS 代码里的字面量，你得保证 axios 配置里用的是 process.env.XXX 这种形式，而不是直接写死。

最靠谱的方案是用 .env 文件配合 webpack 的 DefinePlugin：

第一步，创建环境变量文件

在项目根目录建两个文件：

.env.development 内容是：
VUE_APP_API_BASE_URL=http://localhost:3000/api

.env.production 内容是：
VUE_APP_API_BASE_URL=https://prod.example.com/api

（如果你用的不是 Vue 是其他框架，把 VUE_APP_ 改成你框架约定的前缀就行，React 用 REACT_APP_，普通项目用自定义的）

第二步，修改 webpack 配置

在 webpack 的 plugins 里这样配：

const webpack = require('webpack');

const dotenv = require('dotenv');const env = process.env.NODE_ENV === 'production' 

  ? dotenv.config({ path: '.env.production' })

  : dotenv.config({ path: '.env.development' });



module.exports = {

  plugins: [

    new webpack.DefinePlugin({

      'process.env': JSON.stringify(env.parsed)

    })

  ]

};

第三步，axios 配置里这样用

import axios from 'axios';



const api = axios.create({

  baseURL: process.env.VUE_APP_API_BASE_URL || '/api',

  timeout: 10000

});



export default api;

这样开发时 npm run dev 自动读 .env.development，打包时 npm run build 自动读 .env.production，完全不用手动改。

还有一个偷懒的办法，如果你用的是 Vue CLI 或者 Create React App 这种脚手架，直接在 package.json 的 scripts 里指定环境变量：

{

  "scripts": {

    "dev": "cross-env NODE_ENV=development dotenv -e .env.development vue-cli-service serve",

    "build": "cross-env NODE_ENV=production dotenv -e .env.production vue-cli-service build"

  }

}

脚手架会自动把 VUE_APP_ 开头的变量注入到 process.env 里，axios 配置那边不用动。

你自己试一下，有问题再问。

2026-03-18 17:00