vue.js根据代码运行环境选择baseurl的方法

2024-09-27 09:15:31

配置通用的API前缀可以更好在本地通过接口代理转发获取数据、或者部署时在Nginx中做反向代理，但是项目中一旦涉及大量的需要文件上传的部分（文件上传不走Ajax的方法），我们需要考虑更好管理接口的baseURL，项目中 Ajax 请求用 axios ，原始代码如下

修改前

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
 baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的base_url
 timeout: 5000         // 请求超时时间
})

/* 保存分配角色 */
export function fetchSaveDisUser (params1) {
 return fetch({
  url: '/user/empower',
  method: 'post',
  params: params1,
  paramsSerializer: function (params) {
   return Qs.stringify(params, { arrayFormat: 'repeat' })
  }
 })
}

/* 上传文件URL 从运行环境process.env中读取API配置 */
export let uploadUrl = '/development/api/doi/analys/upload'

优化方法

找到config/dev.env.js 和 config/prod.env.js，在代码添加变量 API_BASEURL（名字自定义）如下：

module.exports = {
 NODE_ENV: '"production"', // PS:不要复制、开发环境和生产环境有区别
 API_BASEURL: '"/development/api/"' // 需要自己添加的代码
}

然后在需要使用baseURL的地方替换为 process.env. API_BASEURL

修改后代码如下

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
 baseURL: process.env.API_BASEURL, // 从环境进程中根据运行环境获取的api的base_url
 timeout: 5000         // 请求超时时间
})

/* 保存分配角色 */
export function fetchSaveDisUser (params1) {
 return fetch({
  url: '/user/empower',
  method: 'post',
  params: params1,
  paramsSerializer: function (params) {
   return Qs.stringify(params, { arrayFormat: 'repeat' })
  }
 })
}

/* 上传文件URL 从运行环境process.env中读取API配置 */
export let uploadUrl = process.env.API_BASEURL + '/doi/analys/upload'

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue.js根据代码运行环境选择baseurl的方法

配置通用的API前缀可以更好在本地通过接口代理转发获取数据.或者部署时在Nginx中做反向代理,但是项目中一旦涉及大量的需要文件上传的部分(文件上传不走Ajax的方法),我们需要考虑更好管理接口的baseURL,项目中 Ajax 请求用 axios ,原始代码如下修改前 // 创建axios实例.配置baseURL.超时时间 const service = axios.create({ baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的bas
vue.js多页面开发环境搭建过程

利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求.但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的.如果全部放到单页面项目下,又显得有点乱,这时候通过改造 vue-cli 搭建的项目为多页面,就是一个比较好的解决方法. 如何改造单页面 vue.js 项目为多页面项目?下面是这次改造的具体过程. 一.创建单页面 vue.js 项目这里直接使用官方提供的脚手架 vue-cli3 创建,具体的过程请
Vue.js子组件向父组件通信的方法实例代码详解

一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文
vue.js $refs和$emit 父子组件交互的方法

本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码: <strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template> <div id="app"> <input type="button" name="" id="" @click="
Vue.js自定义事件的表单输入组件方法

Vue.js使用自定义事件的表单输入组件自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定.要牢记: <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value"> 所以在组件中使用时,它相当于下面的简写: <
利用vue.js把静态json绑定bootstrap的table方法

直接上代码嘻嘻,发现bootstrap+vue.js拿来做原型效率挺高,以后就这样做原型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://cdn.b
vue.js使用watch监听路由变化的方法

watch除了可以监听数据的变化,路由的变化也能被其监听到效果如下: 具体代码当路由发生变化后,在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/registe
vue.js Table 组件自定义列宽实现核心方法

目录前言 colgroup 和 col 核心实现一些常量/变量定义初始化表头列表 initColumns 处理含有固定宽度和最小宽的列获取各列宽度,并组成一个数组 getWidthList 计算需要自适应的列宽度 getAdaptWidth 监听屏幕变化和属性更新前言如果你使用过类似于 ElementUI 的组件库,一定对如下的 API 属性不眼生,例如:  <el-table-column prop="date" l
详解Vue.js在页面加载时执行某个方法

jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程总结以上所述是小编给大家介绍的Vue.js在页面加载时执行某个方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!
vue.js移动数组位置,同时更新视图的方法

使用vue.js v-for绑定若干个选项,需要对选项进行排序上下移动操作. 需要对options里面数组的位置进行交换,通常是这样来写: 假设向前移动一个: var index = this.options.indexOf(option); //获取当前选项对象在数组里面的索引. var tempOption = this.options[index-1]; //存储前一个 this.options[index-1] = option;(this.options[index]) this.op

vue.js根据代码运行环境选择baseurl的方法

相关推荐

随机推荐