Vue.js - 实现开发环境、生产环境自动使用不同的baseURL

2019-07-24 发布：hangge 阅读：5881

日常开发中，Vue 项目在开发环境下请求的接口地址与生产环境下请求的接口地址可能是不一样的。这就要求项目运行时能根据不同的环境，自动切换使用不同的接口地址域名（BASE URL）。下面演示这个如何实现。

1，为不同环境分别设置不同地址

（1）在项目的 config 文件夹下有 dev.env.js 和 prod.env.js 两个文件，它们分别配置开发环境的变量和生产环境的变量。

（2）首先打开 dev.env.js 文件，添加一个 BASE_URL 变量，其值为开发环境下使用的后台接口域名。

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_URL: '"http://localhost:59090"'
})

（3）接着打开 prod.env.js 文件，同样添加一个 BASE_URL 变量，其值为生产环境下使用的后台接口域名。

由于生产环境下，我这个项目前端页面直接编译部署到后台项目中，这里后台接口域名直接配空即可。

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: '""'
}

2，修改 axios 的 baseURL

打开项目 src 文件夹中的 main.js 文件，在里面添加如下代码，设置 axios 的默认 baseURL。

import axios from 'axios'
axios.defaults.baseURL = process.env.BASE_URL

3，运行测试

（1）假设我们代码中有如下请求：

axios.get("/getInitData")
       .then(response => {
           console.log(response.data)
           this.tableData = response.data;
       }, err => {
           console.log(err)
       })
       .catch((error) => {
           console.log(error)
       })

（2）如果在开发环境（执行 npm run dev 的时候），实际请求的是如下地址：

http://localhost:59090/getInitData

（3）如果在生产环境（执行 npm run build 的时候），实际请求的是如下地址：

/getInitData

附：将 baseURL 添加到 Vue.prototype 原型属性中

（1）可能项目中除了 axios，还有其它地方需要用到 baseURL。我们可在 main.js 文件中添加如下代码，将 baseURL 设置为 Vue 原型属性。

Vue.prototype.baseURL = process.env.BASE_URL

（2）这样 baseURL 就在所有的 Vue 实例中可用了。

export default {
  name: 'Home',
  data () {},
  methods:{
  created: function () {
    console.log(this.baseURL)
  }
}