Le serveur Apache déploie le projet Vue-Questions et réponses frontales-php.cn

Le serveur Apache déploie le projet Vue

王林

Libérer： 2023-05-24 13:31:08

original

2136 Les gens l'ont consulté

Avec le développement rapide de la technologie de développement front-end, de plus en plus de projets de pages statiques sont regroupés dans SPA (Single Page Application), et Vue.js, en tant que leader parmi eux, est devenu de plus en plus populaire. de nombreux développeurs front-end.

Il existe de nombreuses façons de déployer Vue.js. L'une des méthodes les plus courantes consiste à utiliser le serveur Apache pour déployer des projets Vue.js. Ensuite, nous présenterons comment déployer le projet Vue.js sur le serveur Apache.

1. Installez le serveur Apache

Tout d'abord, nous devons installer le serveur Apache. Sur le système d'exploitation Ubuntu, vous pouvez l'installer via la commande suivante :

sudo apt-get update
sudo apt-get install apache2

Copier après la connexion

2. Packagez le projet Vue.js

Entrez le chemin du projet Vue.js et utilisez la commande suivante pour packager le projet :

npm run build

Copier après la connexion

Après l'exécution la commande, Un dossier dist sera généré sous le projet, qui contient les fichiers que nous devons déployer.

3. Créer un hôte virtuel Apache

Avant de déployer le projet Vue.js, nous devons d'abord créer un hôte virtuel Apache. Sur le système d'exploitation Ubuntu, le fichier de configuration de l'hôte virtuel Apache se trouve dans le répertoire /etc/apache2/sites-available. /etc/apache2/sites-available目录下。

创建虚拟主机配置文件，例如：

sudo nano /etc/apache2/sites-available/vue.conf

Copier après la connexion

在文件中添加以下内容：

<VirtualHost *:80>
    # 端口号可以更改
    ServerName yoursite.com
    # 域名或者IP地址
    DocumentRoot /var/www/vue
    # Vue.js项目打包文件夹的路径
    <Directory /var/www/vue>
        Options -Indexes
        AllowOverride All
        Order allow,deny
        allow from all
        Require all granted
    </Directory>
    ErrorLog /var/log/apache2/vue_error.log
    CustomLog /var/log/apache2/vue_access.log combined
</VirtualHost>

Copier après la connexion

其中，ServerName项填写域名或IP地址，DocumentRoot项填写Vue.js项目打包文件夹的路径。

保存文件后，执行以下命令使修改生效：

sudo a2ensite vue.conf

Copier après la connexion

接着，重新启动Apache服务器：

sudo service apache2 restart

Copier après la connexion

4.部署Vue.js项目

将Vue.js项目打包后得到的dist文件夹复制到Apache虚拟主机配置中的DocumentRoot路径下。

为了确保Apache服务器可以正常加载这些文件，我们需要在index.html文件里添加一个base

Créez un fichier de configuration d'hôte virtuel, par exemple :

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue App</title>
    <base href="/">
    <!-- 其他依赖资源 -->
</head>

Copier après la connexion

Ajoutez le contenu suivant dans le fichier :

rrreee

Parmi eux, renseignez le nom de domaine ou l'adresse IP dans l'élément ServerName, et remplissez l'élément DocumentRoot Le chemin d'accès au dossier d'empaquetage du projet Vue.js.

Après avoir enregistré le fichier, exécutez la commande suivante pour rendre les modifications effectives : 🎜rrreee🎜Ensuite, redémarrez le serveur Apache : 🎜rrreee🎜4. Déployez le projet Vue.js🎜🎜Copiez le dossier dist obtenu après avoir empaqueté la Vue. js vers Apache Sous le chemin DocumentRoot dans la configuration de l'hôte virtuel. 🎜🎜Afin de garantir que le serveur Apache puisse charger ces fichiers normalement, nous devons ajouter une balise base au fichier index.html pour spécifier le répertoire dans lequel le Le fichier HTML est localisé. Par exemple : 🎜rrreee🎜Après avoir enregistré les modifications, nous pouvons accéder au projet Vue.js en accédant au nom de domaine ou à l'adresse IP de l'hôte virtuel. 🎜🎜Résumé🎜🎜Ce qui précède explique comment utiliser le serveur Apache pour déployer le projet Vue.js. Le processus de déploiement peut varier légèrement en fonction de votre environnement personnel, mais en général, il vous suffit de suivre les étapes ci-dessus pour terminer le déploiement en douceur. Il convient de mentionner que la méthode de déploiement de Vue.js est très flexible et que les lecteurs peuvent choisir la méthode qui leur convient en fonction de leurs propres besoins. 🎜

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!