详解vue+axios给开发环境和生产环境配置不同的接口地址


Posted in Javascript onAugust 16, 2019

为什么要配置不同的接口地址

在开发过程中,前端请求访问的是自己本机启动的后台服务,此时涉及到跨域(因为端口不一样),所以在config/index.js文件中配置了代理

//检查某个文件是否存在
try {
 fs.statSync(path.join(__dirname, '../proxy/' + templatedir + '.json'))
 //如果可以执行到这里那么就表示存在了
 console.log(124)
 proxyTable = require('../proxy/' + templatedir + '.json')
} catch (e) {
 //捕获异常'
}
module.exports = {
 dev: {
  // Paths
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: proxyTable,

  // Various Dev Server settings
  host: 'localhost', // can be overwritten by process.env.HOST
  index: templatedir,
  port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}

然后再proxy文件夹里建立对应的项目名.json文件,

{
 "/": {
  "target": "", // 被请求的地址
  "changeOrigin": true,
  "pathRewrite": {
   "^/": "/"
  }
 }
}

注意:proxyTanle这个插件只限于开发模式下,后面一定要将前端代码和服务器代码部署在一起,负责需要通过Nginx进行跨域的转发配置。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 获取服务器控件值的代码
Mar 05 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 #Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 #Javascript
基于vue写一个全局Message组件的实现
Aug 15 #Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 #Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 #Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 #Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 #Javascript
You might like
PHP教程 基本语法
2009/10/23 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
php强制下载文件函数
2016/08/24 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
安装dbus-python的简要教程
2015/05/05 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
带你了解python装饰器
2017/06/15 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
python 录制系统声音的示例
2020/12/21 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
一封普通求职者的求职信
2013/11/20 职场文书
红色故事演讲稿
2014/05/22 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
党纪处分决定书
2015/06/24 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL