vue实践---根据不同环境,自动转换请求的url地址操作

一般的项目环境分为：本地环境，测试环境，预发环境，正式环境。 这些环境的域名一般是一样的， 前端请求接口的url也会随着这些环境的变化而改变，手动修改有点麻烦，所以想个办法，让请求的地址根据域名改变而改变。

第一步：

建立一个RequestConfig.js 作为配置文件，内容如下：

const APIMapping = {
 project1: {
  test: 'http://123.com',
  local: 'http://abc.com'
 },
 project2: {
  test: 'http://123.com',
  local: 'http://abc.com'
 }
 }
const currentEnvMapping = {
 '127.0.0.1': 'test',
 'localhost': 'local',
}
export { currentEnvMapping, APIMapping }

这里只列举了测试环境，和本地环境，其他环境使用方法一样。

APIMapping是所有的项目，这里有 project1，project2 ；每个项目分为本地环境（test），测试环境（local）;

currentEnvMapping 指明什么域名下使用本地环境的域名，还是测试环境的域名。

第二步

使用vuex, 建立一个store文件存放vuex, 然后再建立index.js存放数据：

import Vue from 'vue'
import Vuex from 'vuex'
import { APIMapping, currentEnvMapping } from './../common/RequestConfig.js'

Vue.use(Vuex)
const state = {
　　// 这里currentEnvMapping[location.hostname]确定是test， 还是local环境
　　// APIMapping['project1']确定了是哪个项目
　　// APIMapping['project1'][currentEnvMapping][location.hostname]最终确定了url　　

 RequestHost: APIMapping['project1'][currentEnvMapping[location.hostname]]
}

const getters = {
 get_RequestHost: state => {
 return state.RequestHost
 }
}

export default new Vuex.Store({
 state,
 getters
})

第三步

就可以使用了，跟正常的vue一样，代码如下：

 mounted(){
 console.log(this.$store.getters.get_RequestHost)
 }

具体的代码看这里: https://github.com/YalongYan/vue-practice/tree/master/dynamic-request

补充知识：vue-cli项目生产环境和开发环境请求接口配置，不用手动切换，自动切换地址的问题

1、在dev.env.js文件中添加配置(开发环境)：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 url_api: '"api"' // 添加的请求接口，键值都可以自定义，
})

2、在prod.env.js文件中添加配置（生产环境）:

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 url_api: '"http://192.168.0.30/server-carApp/"' // 添加的键值对，键开发和生成环境要保持一致，值是打包后上线的地址
}

3、在axios请求文件中，通过process.env.url_api就可以拿到请求的根接口，

我的请求文件中的设置：

const service = axios.create({
 baseURL: process.env.url_api, // 通过process.env.url_api拿到请求的地址
 withCredentials: true,
 timeout: 60 * 1000
})

我之所以在开发环境中配置url_api的值为api，是因为我在config/index.js中配置的跨域代理写的是api，

config下的index.js文件中关于跨域代理的配置

module.exports = {
 dev: {

 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
  '/api': {
  target: 'http://192.168.0.30/server-carApp/', // 后台接口
  changeOrigin: true, // 是否开启跨域
  // secure: false, // 如果是https接口，需要配置这个
  pathRewrite: {
   '^/api': ''
  }
  }
 },
 。。。。。。

4、同样的，在具体的.vue组件文件中，也可以通过process.env.url_api拿到根api接口地址，然后可以用字符串拼接，得到想要的完整url请求地址。

例如，在login.vue文件中，有一个图片验证码的地址，

<template>
<img :src="codeImgSrc" alt="图片验证码"/>
</template>
<script>
// 这样根路径就被引入进来了，不用在打包上线的时候在具体的文件中改资源路径
const imgUlr = process.env.url_api + '/main/validate/qrCode?w=300&h=80'
export default {
name: 'Login',
 data() {
 return {
 codeImgSrc: imgUlr,
 }
 }
}
</script>

以上这篇vue实践---根据不同环境,自动转换请求的url地址操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue多环境代理配置方法思路详解

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了. 第一,很容易引起冲突. 第二,很容易出现代理错误,需要排查.而且现在微服务盛行,在生产环境下有网关配置,不会出错,但是在本地调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很麻烦也很容易出错. 解决思路: 1.开发中定义常量js文件,例如constants.js.用户存放各个服务需要代理的服务名. let api = "" let loginServer = &q

  • vue请求数据的三种方式

    请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供的一个插件 使用步骤: 1.安装vue-resource模块 cnpm install vue-resource --save 加--save是为了在package.json中引用,表示在生产环境中使用.因为我们在日常开发中,如果我们要打包代码给其他人或者上传到github,又或者要发布代码时,pa

  • 在vue中配置不同的代理同时访问不同的后台操作

    如果和不同的后台调接口,如果后台接口没有合到一起,前端可以配不同的代理来共同访问他们的接口 在config文件夹下的index.js中设置如下: proxyTable: { '/api/login': { // 第一个代理:此处的路径是所有接口前面相同的部分,用来匹配带有这部分路径的 target: "http://192.168.100.209:8910", changeOrigin: true, secure: false }, '/api/supplier': { // 设置第二

  • vue实践---根据不同环境,自动转换请求的url地址操作

    一般的项目环境分为:本地环境,测试环境,预发环境,正式环境. 这些环境的域名一般是一样的, 前端请求接口的url也会随着这些环境的变化而改变,手动修改有点麻烦,所以想个办法,让请求的地址根据域名改变而改变. 第一步: 建立一个RequestConfig.js 作为配置文件,内容如下: const APIMapping = { project1: { test: 'http://123.com', local: 'http://abc.com' }, project2: { test: 'http

  • Vue在外部配置打包文件夹名称和url地址前缀

    Vue在外部配置打包文件夹名称和url地址前缀

    在public中添加以下两个js文件 config_build.js: module.exports = { //打包文件夹名 OUTPUT_DIR: 'test', //浏览器url地址前缀.需要同步更改config_settings.js中的ROUTE_PREFIX ROUTE_PREFIX: '/test/' } vue.config.js: const config_build = require('./public/config_build') module.exports = { p

  • 解决vue中无法动态修改jqgrid组件 url地址的问题

    在项目开发中使用封装的jqgrid组件时需要动态修改URL地址,直接修改URL地址jqgrid请求的url地址并不会改变,这时我们可以强行修改jqgrid的url地址,修改如下: $("#accountGrid").setGridParam( //G,P要大写 { url:UrlService.url('www/1') } ) .trigger("reloadGrid"); 以上这篇解决vue中无法动态修改jqgrid组件 url地址的问题就是小编分享给大家的全部内

  • JavaScript实现url地址自动检测并添加URL链接示例代码

    背景:写一个简单的聊天系统,发出Htpp的Url实现跳转加上a标签. 实现代码: 复制代码 代码如下: String.prototype.httpHtml = function(){ var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; return this.replace(reg, '<a target=_blank href="$1$2">$1$2</a>'); }; 摘录: URL地

  • Vue项目自动转换 px 为 rem的实现方法

    前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem. 技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大

  • 为vue项目自动设置请求状态的配置方法

    在进入一个页面的时候,一般在获取数据的同时,会先显示一个 loading ,等请求结束再隐藏 loading 渲染页面,只需要用一个属性去记录请求的状态,再根据这个状态去渲染页面就好了 async handler() { this.loading = true await fetch() this.loading = false } 虽然是很简单的功能,可是要处理的地方多的时候,还是很繁琐的,就想着能不能统一设置处理请求的 loading ,然后页面根据 loading 的状态决定要显示的内容,

  • vue 本地环境跨域请求proxyTable的方法

    主要在config->index.js中配置 proxyTable: { '/gameapi': { changeOrigin: true, // target: 'http://rap.id.cn/mockjs/20', mock地址 target: 'http://192.168.1.124',服务器地址 pathRewrite: { '^/gameapi': '/gameapi' }, secure:false } } 因此,发送请求时候url写为('/gameapi/gift-apply

  • 详解用Docker搭建Laravel和Vue项目的开发环境

    本文介绍了用Docker搭建Laravel和Vue项目的开发环境,分享给大家,具体如下: 在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速.轻量级.不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境(开发环境的所有依赖都安装在Docker构建容器里),加入Vue只是因为有的项目里会在Laravel项目中使用Vue做前后端分离开发,开发环境中需要安装前端开发需要的工具集,当然前后端也可以分成两个项目开发,这个话题不在本篇文章的讨论范围内. 所以我们的目标

  • 详解vue+vuex+koa2开发环境搭建及示例开发

    写在前面 这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用. 搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据.即,模拟后端接口. 当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点. 包括: koa2的知识点 node的知识点 跨域问题 fetch的使用 axios的使用 promise的涉及 vuex -> st

  • vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

    本项目是vue-cli搭建的项目框架,引入axios用于数据请求.配置不同的接口地址,(首先确保已经集成了axios,如对集成axios有疑问的道友,可参看我之间的一篇vue-cli 引入axios)操作如下 一.设置不同的接口地址 找到如下文件 /config/dev.env.js /config/prod.env.js 之后增加接口地址域名配置,增加后的文件内容如下 二.在自己重新封装的axios文件中(api/api.js),将配置好的接口地址作为baseURL拼接到接口路径中 详细的ap

随机推荐