背景

vue-cli脚手架生成的webpack标准模板项目

HTTP库使用axios

一、开发环境跨域与API接口服务通信

整体思路:

  • 开发环境API接口请求baseURL为本地http://localhost:8080
  • 为本地请求配置代理,代理目标服务器设置为接口服务所在地址或域名

具体步骤如下:

1、config/dev.env.js文件中配置baseURL

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://localhost:8080"' //配置为本地地址才会访问到本地虚拟的服务器,从而通过第1步中代理访问API服务,避免跨域
})

2、axios配置baseURL

// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})

3、config/index.js文件中配置开发环境代理

module.exports = {
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { // 代理配置信息
'/taskinfo': {
target: 'http://192.168.162.22:8381/taskinfo', // API服务所在IP及端口号
changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,这样就不会有跨域问题(只适合开发环境)
pathRewrite: {
'^/taskinfo': '' // 重写路径
}
}
}, ……
}
}

二、生产环境配置API接口服务信息

生产环境直接指向API接口服务,使用IP或域名

1、config/dev.env.js文件中配置baseURL

'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"http://192.168.162.22:8381/"' // API服务所在IP及端口,或域名
}

2、axios配置baseURL

同开发环境,无需重复配置

三、生产环境静态文件获取目录(静态文件独立部署)

待续……

构建:vue项目配置后端接口服务信息的更多相关文章

  1. vue-cli快速构建vue项目模板

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.使用npm安装vue-cli 需要先装好vue 和 webpack(前提是已经安装了nodejs,否则连npm都用不了 ...

  2. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  3. 单机Web后端接口服务压力测试

    单机Web后端接口服务压力测试 工具:Apache jmeter 环境:Window 10 语言:Kotlin + java 架构:SpringBoot + + Mysql + redis + Spr ...

  4. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

  5. 自动化工具构建vue项目

    其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记.但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法.就算是在实际项 ...

  6. 使用nodeJs安装Vue-cli并用它快速构建Vue项目

    部分摘自:http://www.cnblogs.com/wisewrong/p/6255817.html(已在本地测试) 前提:nodeJs本地已安装. 一.安装 vue-cli 1.使用nodeJs ...

  7. 如何在你的Vue项目配置vux

    做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库 ...

  8. vue,一路走来(1)--构建vue项目

    2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...

  9. 基于Typescript的Vue项目配置国际化

    基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...

随机推荐

  1. Tomcat 环境安装

    本文以Tmcat 7版本在Windows Server 2012 64位系统下安装讲解,JAVA环境安装配置参见:http://www.cnblogs.com/fklin/p/6670760.html ...

  2. Openlayers3中实现台风风圈绘制算法

    概述: 台风的风圈的NE.NW.SW.SE四个方位的影响范围是不一致,本文介绍一种简单的风圈的绘制方法,并在OL3中展示. 实现效果: 实现代码: 1.数据格式 var Configs = { CIR ...

  3. js 以函数名作为参数动态执行 函数

    function myFunc() { console.log(11111); } test("myFunc"); function test(funcName) { if(typ ...

  4. vue-router(二)后代路由

    关键字:router,children ,router-link,router-view,router-link-active 先理解什么是children? 后代路由为某路由中用到router-vi ...

  5. ranch分析学习(四)

    经过的前面的梳理,整个ranch框架的结构,大致有了一个清晰的脉络,即使我说的不是很清楚大家也基本能阅读懂源码.下面我继续分析剩下的的几个文件. 7.ranch_transport.erl 这个文件是 ...

  6. java中的Reference

    这两天又重新学习了一下Reference,根据网上的资源做了汇总. Java中的引用主要有4种: 强引用 StrongReference: Object obj = new Object(); obj ...

  7. Java IO,io,文件操作,删除文件,删除文件夹,获取文件父级目录

    Java IO,io,文件操作,删除文件,删除文件夹,获取文件父级目录 这里先简单的贴下常用的方法: File.separator //当前系统文件分隔符 File.pathSeparator // ...

  8. ubuntu安装依赖:0.8.1-1ubuntu4.4 正要被安装以及vm nested解决方法

    刚才在ubuntu10.04虚拟机上安装kvm,提示0.8.1-1ubuntu4.4 正要被安装,查了一下,有一种解决方法: 进入“系统->系统管理->更新管理器->设置”,在弹出的 ...

  9. BZOJ3926 Zjoi2015 诸神眷顾的幻想乡【广义后缀自动机】

    Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看. ...

  10. 20165212 预备作业3 Linux安装及学习

    20165212 预备作业3Linux安装及学习 Linux虚拟机的安装过程 我像大部分同学一样,通过助教学姐给的Ubuntu下载地址下载映像文件.VB,但是屡次出现问题,不停的闪出一下错误提示窗口: ...