首页 > 其他 > 详细

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

时间:2020-07-15 16:02:03      阅读:42      评论:0      收藏:0      [点我收藏+]

背景

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

操作步骤

找到项目根目录下的 config 文件夹,里面有三个文件:
技术分享图片

其中的 dev.env.jsprod.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 _

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

原文:https://www.cnblogs.com/1lin24/p/13305250.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!