Comment résoudre le problème selon lequel le déploiement de Vue vers le transfert en ligne ne prend pas effet

Vue.js est un framework front-end populaire Au cours du processus de développement, nous déployons généralement des applications frontales Vue.js sur des serveurs cloud. Cependant, après le déploiement, nous rencontrons parfois le problème que le transfert ne prend pas effet. Alors, comment résoudre le problème selon lequel le déploiement de Vue vers le transfert en ligne ne prend pas effet ?

1. Vérifiez la configuration de Nginx

La première étape consiste à vérifier si la configuration de Nginx est correcte. Dans la configuration Nginx, nous devons configurer le chemin à transférer comme emplacement et spécifier le serveur proxy et le port. Par exemple :

server {
    listen 80;
    server_name example.com;
    location /api/ {
        proxy_pass http://localhost:3000;
    }
}

La configuration ci-dessus signifie transférer toutes les requêtes sous example.com/api/ vers le port local 3000. example.com/api/ 下的所有请求转发到本地的 3000 端口。

二、检查 Vue 代码转发配置

除了 Nginx 配置，还需要检查 Vue 代码转发配置。在 vue.config.js 文件中，我们需要将需要转发的路径配置为 proxy 选项，同样指定代理服务器及端口。例如：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

以上配置表示将 /api 下的所有请求转发到本地的 3000 端口，并且将请求路径中的 /api

2. Vérifiez la configuration du transfert de code Vue

En plus de la configuration Nginx, vous devez également vérifier la configuration du transfert de code Vue. Dans le fichier vue.config.js, nous devons configurer le chemin à transférer comme option proxy, et également spécifier le serveur proxy et le port. Par exemple :

systemctl status firewalld

La configuration ci-dessus signifie transférer toutes les requêtes sous /api vers le port local 3000 et supprimer /api du chemin de requête pour implémenter l'objectif de transfert de requête.

3. Vérifiez les paramètres du pare-feu

Si les deux méthodes ci-dessus ne parviennent pas à résoudre le problème, nous devons également vérifier les paramètres du pare-feu du serveur cloud. Parfois, les paramètres du pare-feu du serveur cloud restreignent l'accès à certains ports, rendant notre service de transfert inaccessible depuis l'extérieur du serveur. Pour vérifier les paramètres du pare-feu, vous devez vous connecter au serveur cloud. En prenant CentOS comme exemple, exécutez la commande suivante :

sudo systemctl start firewalld  # 启用防火墙
sudo firewall-cmd --permanent --add-port=3000/tcp  # 开放 3000 端口
sudo firewall-cmd --reload  # 重启防火墙
sudo firewall-cmd --list-all  # 查看已开放端口

Si le pare-feu n'est pas activé, l'accès au port ne sera pas restreint. des paramètres d’ouverture de port sont requis. En prenant le port 3000 comme exemple, exécutez la commande suivante :

rrreee

La commande ci-dessus ouvrira le port 3000 afin que les serveurs externes puissent accéder à notre service de transfert. 🎜🎜Résumé🎜🎜Les trois méthodes ci-dessus permettent de résoudre le problème selon lequel le déploiement de Vue vers le transfert en ligne ne prend pas effet. Pendant le processus de développement proprement dit, nous devons vérifier en même temps les paramètres de Nginx, du code Vue et du pare-feu du serveur cloud. Grâce à la série d'opérations ci-dessus, nous pouvons déployer avec succès l'application Vue.js et implémenter le transfert de requêtes. 🎜

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!