Que dois-je faire si l'API du chemin de l'interface est manquante une fois que vue est empaquetée ?

Avec le développement continu de la technologie front-end, les frameworks front-end sont également constamment améliorés et optimisés. L'un des frameworks frontaux les plus populaires actuellement est Vue. Vue est léger, facile à apprendre et à utiliser, et est favorisé par la majorité des développeurs. Mais lors de l'utilisation de Vue, certains développeurs ont rencontré un problème : après le packaging, le chemin de l'interface (api) a disparu. Alors quel est le problème ?

Description du problème

Pendant le processus de développement, nous utiliserons le chemin d'interface, tel que :

const url = '/api/user/login';

Après avoir empaqueté le projet Vue, nous pouvons constater que le chemin d'interface (api) disparaît, tel que :

const url = 'user/login';

Ceci conduit à L'interface de requête a échoué.

Cause du problème

La raison de ce problème est que Vue utilise webpack pour l'empaquetage, et la méthode d'empaquetage de webpack emballe et compresse toutes les ressources, y compris JS, CSS, images, etc.

Nous pouvons jeter un œil au fichier de configuration vue.config.js dans le projet Vue : vue.config.js配置文件：

module.exports = {
  // 配置打包和部署的根路径
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
  // 打包时不生成.map文件，加快打包速度
  productionSourceMap: false
};

其中，publicPath是我们在打包之后使用的路径。在开发环境下，我们使用的是/，表示根路径；而在生产环境下，我们使用的是./，表示相对路径。

由于我们的接口路径(api)是绝对路径，因此在打包时，接口路径(api)就会被打包成相对路径。这样就导致了接口路径(api)消失的问题。

解决方法

针对这个问题，我们可以采用以下几种方法进行解决。

方法一：使用绝对路径

我们可以将接口路径(api)改为绝对路径，即添加域名前缀，如：

const url = 'http://localhost:8080/api/user/login';

这样，在打包时，接口路径(api)就不会被打包成相对路径了。

方法二：配置代理

我们可以在vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标地址
        changeOrigin: true, // 是否改变原始地址
        secure: true, // 是否使用https
        pathRewrite: {
          '^/api': '' // 路径重写
        }
      }
    }
  }
};

Parmi eux, publicPath est le chemin que nous utilisons après l'empaquetage. Dans l'environnement de développement, nous utilisons / pour représenter le chemin racine ; dans l'environnement de production, nous utilisons ./ pour représenter le chemin relatif.

Étant donné que notre chemin d'interface (api) est un chemin absolu, lors de l'empaquetage, le chemin d'interface (api) sera empaqueté dans un chemin relatif. Cela conduit au problème de la disparition du chemin d’interface (API).

Solution

Pour résoudre ce problème, nous pouvons utiliser les méthodes suivantes pour le résoudre.

Méthode 1 : Utiliser le chemin absolu

Nous pouvons changer le chemin de l'interface (api) en un chemin absolu, c'est-à-dire ajouter un préfixe de nom de domaine, tel que :

const url = '/api/user/login';

De cette façon, lors de l'empaquetage, le chemin de l'interface ( api) ne sera pas empaqueté en tant que chemin relatif. 🎜🎜Méthode 2 : Configurer le proxy🎜🎜Nous pouvons ajouter un proxy dans le fichier de configuration vue.config.js pour transmettre le chemin de l'interface (api) vers l'adresse cible. Dans l'environnement de développement, nous utilisons un serveur de développement, qui est lui-même un serveur proxy. Nous pouvons utiliser ce serveur proxy pour le transfert. 🎜rrreee🎜Après avoir configuré le proxy, lorsque nous demandons l'interface dans le code, il suffit d'écrire le chemin relatif, tel que : 🎜rrreee🎜De cette façon, le chemin de l'interface (api) ne disparaîtra pas après l'empaquetage. 🎜🎜Méthode 3 : Utiliser vue-cli-plugin-apimock🎜🎜Nous pouvons utiliser le plug-in vue-cli-plugin-apimock pour se moquer de l'interface. Ce plug-in nous permet d'utiliser le chemin d'interface (api) avec les données Mock pendant la phase de développement, puis de remplacer le chemin d'interface (api) par la véritable adresse de l'interface lors du packaging. Cela peut non seulement garantir l'efficacité du développement, mais également éviter le problème de la disparition du chemin d'interface (API). 🎜🎜Résumé🎜🎜Grâce à l'analyse ci-dessus, nous pouvons voir que le problème de la disparition du chemin d'interface (api) est dû à la conversion du chemin absolu en chemin relatif lors de l'empaquetage. Pour résoudre ce problème, nous pouvons utiliser des chemins absolus, configurer des agents ou utiliser le plug-in vue-cli-plugin-apimock. La méthode à choisir dépend de notre situation et de nos besoins réels. 🎜

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!