How to choose baseurl according to the code environment

This time I will bring you the method of selecting baseurl according to the code environment. What are the precautions for selecting baseurl method according to the code environment? The following is a practical case. Get up and take a look.

Configuring a common API prefix can better obtain data locally through interface proxy forwarding, or do a reverse proxy in Nginx during deployment, but once the project involves a large number of needs

File upload part (file upload does not use Ajax method), we need to consider the baseURL of the better management interface in the project Ajax requests use axios, the original code is as follows

Before modification

// 创建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'

Optimization

Find config/dev.env.js and config/prod.env.js, and add the variable API_BASEURL (customized name) in the code as follows:

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

Then replace baseURL with process.env. API_BASEURL

The modified code is as follows

// 创建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'

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue cli How to use

Detailed explanation of the use of vue global registration and local registration

The above is the detailed content of How to choose baseurl according to the code environment. For more information, please follow other related articles on the PHP Chinese website!