vue部署包可配置后台接口地址的方法

部署Vue前端应用时，可能存在需要动态配置后台接口地址的情况，比如区分开发环境、测试环境和生产环境的接口地址不同，如果需要每次手动修改这些接口地址，非常麻烦和容易遗漏，因此需要使用一些方法来实现动态配置。

下面就是一个可以用于Vue部署包可配置后台接口地址的方法。

1. 配置文件定义

Vue项目可以通过定义不同环境的配置文件，分别来指定不同环境的后台接口地址。这个配置文件可以统一使用JSON格式。

在项目根目录下创建config文件夹，并根据需要在config文件夹下创建不同环境的配置文件，例如：
├─config │ ├─dev.env.json // 开发环境配置文件 │ ├─test.env.json // 测试环境配置文件 │ └─prod.env.json // 生产环境配置文件
定义配置文件中的参数如下：
{ "BASE_API": "/api", "APP_DEBUG": true }
其中BASE_API表示后台接口地址，APP_DEBUG表示是否启用调试模式。在不同的环境下，这两个参数的值可能不同。

2. Webpack配置

在Vue项目的配置文件vue.config.js中，可以通过copy-webpack-plugin插件，将不同环境的配置文件复制到打包后的文件夹中，并在process.env全局变量中设置相应的环境变量。

示例代码：

// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  // ...其它配置
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: `./config/${process.env.NODE_ENV}.env.json`,
          to: './static/env.json',
          toType: 'file'
        }
      ])
    ]
  },
  // 输出路径为相对路径
  publicPath: './',
  // 开启sourcemap
  productionSourceMap: true,
  chainWebpack: config => {
    // 配置全局变量
    config.plugin('define').tap(args => {
      args[0]['process.env'].APP_ENV = JSON.stringify(process.env.NODE_ENV)
      return args
    })
  }
}

3. 使用配置文件

在Vue项目中，可以通过axios的baseURL配置来实现动态配置后台接口地址。在基于Vue Cli 3.x和Axios的项目中，可以在src文件夹下的main.js中配置axios的baseURL，并从env.json中读取后台接口地址。

示例代码：

// main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

// 配置axios的baseURL
axios.defaults.baseURL = process.env.NODE_ENV !== 'production' ? '/api' : JSON.parse(document.querySelector('#env').textContent).BASE_API

new Vue({
  render: h => h(App),
}).$mount('#app')

在index.html中，需要在</head>标签前添加以下代码，以将配置文件中的参数注入到全局中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vue-cli3-seed</title>
    <script type="text/template" id="env">
      <% JSON.stringify(process.env) %>
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

这个代码块的作用是将process.env打包后的全局变量序列化后注入到_id为env的script标签中，在axios的baseURL中使用。

示例说明

示例1：假设在开发环境下，后台接口地址为http://localhost:8080/api，在测试环境下，后台接口地址为http://192.168.0.1:8080/api，在生产环境下，后台接口地址为http://api.example.com。为了实现动态配置后台接口地址，可以在config文件夹下创建三个配置文件dev.env.json,test.env.json,prod.env.json，分别定义BASE_API参数为相应的后台接口地址。在vue.config.js中使用copy-webpack-plugin插件将这三个文件复制到打包后的文件夹中，在chainWebpack中配置全局变量APP_ENV为当前的环境名称。在main.js中使用axios的baseURL来动态配置后台接口地址。
示例2：假设在开发、测试和生产环境下，使用的后台接口地址均为相同的地址，都是http://backend.example.com。同样可以使用上面介绍的方法，在config文件夹下创建三个配置文件，并定义相同的BASE_API参数为http://backend.example.com。优点是在修改后台接口地址时，只需要修改配置文件即可，不需要修改代码。