使用 VUE 开发 SPA 时如何根据不同环境指向不同的 请求地址

背景

刚接触 VUE，用它写了一个后台，发现完成开发测试之后，切换到生产环境时，需要手动修改 axios 的 baseUrl, 一顿搜索后，找到以下解决方案

操作步骤

找到项目根目录下的 config 文件夹，里面有三个文件：

其中的 dev.env.js 和 prod.env.js 可以用来配置开发环境及生产环境对应的环境变量
向 dev.env.js 中添加 API_ROOT 字段，最终内容如下：

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"http://your_ip_address:port"'
})

将 prod.env.js 中添加 API_ROOT 字段，最终内容如下：

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"https://your.domain.com"'
}

需要注意的是，单引号包含的内容用双引号包围着，这里容易写氏

下一步：

import axios from 'axios';
axios.defaults.baseURL = process.env.API_ROOT

都配置好之后，假设我们要请求一个登录api,可以这样写：

axios.post(`/login`, params)
.then(res => {
      console.log('login success.')
})

最后，如果要运行开发环境：

npm run dev

如果要生成生产环境：

npm run build

写在最后

这是我在开发过程中遇到的问题，通过搜索之后记录下来的解决方案，希望能够帮助到你。 Have a nick day ^_