使用 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 _