背景

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. ajaxFileUpload的data数据带pre标签

    解决办法: var ret = jQuery.parseJSON(jQuery(data).text());

  2. mysql 数据传输报错 MySQL server has gone away With statement:

    利用navicat premium 拷贝数据库时,报错MySQL server has gone away With statement:, 造成这样的原因一般是sql操作的时间过长,或者是传送的数据 ...

  3. String,StringBuffer和StringBuilder比较

    String:查看源码得知,String类的声明是:public final,所以可以很清楚的知道,fianl的话是改变不了的,所以,如果我们用String来操作字符串的时候,一旦我们字符串的值改变, ...

  4. 如何实现PLC与THINGWORX工业物联网平台对接

    物联网(Internet of Things),简称 IoT,对于制造商来说,是行业乃至世界范围内的一股变革浪潮.在我们设计和制造的产品中,将会不断嵌入各种软件.传感器和启用 IP 的连接功能.IDC ...

  5. gulp使用 实现文件修改实时刷新

    gulp例子:https://github.com/Aquarius1993/gulpDemo 淘宝镜像:$ npm install -g cnpm --registry=https://regist ...

  6. [javascript]复制到剪切板

    <!-- 一个简单的小栗子 --> <button class="copy-link" data-fulllink="要被复制的内容在这里-" ...

  7. JSP、Java和Servlet获取当前工程的路径

    JSP.Java和Servlet获取当前工程的路径: 1.JSP中取得路径: 以工程名为TEST为例: (1)得到包含工程名的当前页面全路径:request.getRequestURI()结果:/TE ...

  8. BZOJ1227 SDOI2009 虔诚的墓主人【树状数组+组合数】【好题】*

    BZOJ1227 SDOI2009 虔诚的墓主人 Description 小W 是一片新造公墓的管理人.公墓可以看成一块N×M 的矩形,矩形的每个格点,要么种着一棵常青树,要么是一块还没有归属的墓地. ...

  9. MAC OS环境下搭建基于Python语言的Selenium2自动化测试环境

    #1安装Python Mac OS上自带python2.7,在此介绍安装python3.x版本 去官网下载Python for MAC版本 https://www.python.org 安装文件为pk ...

  10. c++ queue 用法

    最重要的是: queue 和 stack 都没有迭代器!!! 1. push 队列中由于是先进先出,push即在队尾插入一个元素. 2. pop 将队列中最靠前位置的元素拿掉,和push都是没有返回值 ...