Maison > interface Web > js tutoriel > le corps du texte

Comment sélectionner baseurl dans vue.js

亚连
Libérer: 2018-06-04 10:48:55
original
3374 Les gens l'ont consulté

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         // 请求超时时间
})
Copier après la connexion
/* 保存分配角色 */
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'
Copier après la connexion
.

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/"' // 需要自己添加的代码
}
Copier après la connexion

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         // 请求超时时间
})
Copier après la connexion
/* 保存分配角色 */
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'
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal