Comment sélectionner baseurl dans vue.js

Cet article présente principalement la méthode de sélection de baseurl dans vue.js en fonction de l'environnement d'exécution du code. Maintenant, je le partage avec vous et vous donne une référence.

La configuration d'un préfixe d'API commun permet de mieux obtenir des données localement via le transfert de proxy d'interface, ou d'effectuer un proxy inverse dans Nginx pendant le déploiement. Cependant, une fois que le projet implique un grand nombre de parties nécessitant le téléchargement de fichiers (le téléchargement de fichiers le fait). ne prenant pas la méthode Ajax), nous devons considérer la baseURL de la meilleure interface de gestion des requêtes Ajax dans le projet qui utilise axios. Le code original est le suivant

Avant 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'

Méthode d'optimisation

Recherchez config/dev.env.js et config/prod.env.js, ajoutez la variable API_BASEURL (personnalisation du nom) dans le code comme suit :

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

Ensuite, dans Où baseURL doit être utilisé, remplacez-le par process.env API_BASEURL

Le code modifié est le suivant

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

Ce qui précède. c'est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Expliquez en détail comment l'utiliser dans les composants React.

Comment utiliser les méthodes TypeScript dans les composants Vue (tutoriel détaillé)

Implémenter une liaison unidirectionnelle dans l'objet passant du composant Vue, qui comment le faire ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!