Compétences en développement Vue3+TS+Vite : comment déployer et mettre en ligne le projet

Compétences en développement Vue3+TS+Vite : comment déployer et mettre en ligne

1 Configuration du projet
Avant de commencer, nous nous assurons d'abord que Node.js et Vue CLI ont été installés, puis exécutons la commande suivante. pour créer un tout nouveau projet Vue3+TS+Vite :

vue create project-name

Ensuite, sélectionnez "Sélectionner manuellement les fonctionnalités", puis cochez "TypeScript", et enfin appuyez sur Entrée pour installer.

2. Configuration de l'environnement de développement

1. Modifiez le fichier de configuration Vite
   Recherchez le fichier vite.config.ts dans le répertoire racine du projet et modifiez le contenu suivant :

   import { defineConfig } from 'vite'
   
   export default defineConfig({
     base: './',
   })

   Après avoir défini cela, le projet utilisera le chemin actuel. comme chemin de base. Emballez-le.

2. Configurez le répertoire de déploiement
   Ouvrez le fichier src/env/production.ts et remplacez publicPath par le répertoire dans lequel vous souhaitez déployer le projet, par exemple : src/env/production.ts文件，并将publicPath修改为你要部署项目的目录，例如：

   export default {
     publicPath: '/your-project-name/',
   }

   这样设置之后，打包后的文件将会自动放在/your-project-name/目录下。

三、项目构建与打包

1. 构建项目
   执行以下命令，将项目构建为可部署的静态文件：

   npm run build

   构建完成后，在项目根目录下会生成一个dist文件夹，里面存放着打包后的静态文件。

2. 本地测试
   可以通过以下命令在本地启动一个服务器来测试打包后的项目：

   npm install -g http-server
   cd dist
   http-server

   然后在浏览器中打开http://localhost:8080即可查看项目效果。

四、部署到服务器

1. 将打包后的文件上传到服务器上
   将dist文件夹中的所有文件上传到你的服务器上，可以使用FTP工具或者其他方法进行上传。确保文件上传到了正确的目录下。

2. 配置服务器
   在你的服务器上，需要配置一个nginx（或其他类似的服务器软件）来处理静态文件的请求。假设你使用的是nginx，则可以在配置文件中添加以下内容：

   server {
     listen 80;
     server_name your-domain.com;
   
     location / {
    root /path/to/your-project/;
    try_files $uri $uri/ =404;
     }
   }

   注意将your-domain.com替换为你的域名，/path/to/your-project/替换为你上传项目的目录。

3. 启动服务器
   重启nginxrrreee
Ceci Après réglage, les fichiers packagés seront automatiquement placés dans le répertoire /your-project-name/.
4. 
   

3. Construction et packaging du projet

Construisez le projet

Exécutez la commande suivante pour construire le projet dans un fichier statique déployable :

rrreee

Une fois la construction terminée, un dist sera généré dans le dossier du répertoire racine du projet, qui stocke les fichiers statiques packagés. 🎜🎜🎜🎜Tests locaux🎜Vous pouvez démarrer un serveur localement pour tester le projet packagé via la commande suivante : 🎜rrreee🎜Puis ouvrez http://localhost:8080 dans le navigateur pour afficher l'effet du projet . 🎜🎜🎜🎜4. Déployer sur le serveur🎜🎜🎜Télécharger les fichiers packagés sur le serveur🎜Télécharger tous les fichiers du dossier dist sur votre serveur. Vous pouvez utiliser des outils FTP ou une autre méthode pour télécharger. . Assurez-vous que le fichier est téléchargé dans le bon répertoire. 🎜🎜🎜Configurer le serveur🎜Sur votre serveur, vous devez configurer un nginx (ou un autre logiciel serveur similaire) pour gérer les demandes de fichiers statiques. En supposant que vous utilisez nginx, vous pouvez ajouter le contenu suivant dans le fichier de configuration : 🎜rrreee🎜Remplacez votre-domaine.com par votre nom de domaine, Remplacez / path/to/your-project/ avec le répertoire dans lequel vous avez téléchargé le projet. 🎜🎜🎜Démarrez le serveur🎜Redémarrez le serveur nginx pour que la configuration prenne effet. 🎜🎜Vérifiez le déploiement🎜Ouvrez votre nom de domaine ou l'adresse IP du serveur, si tout va bien, vous devriez pouvoir voir votre projet s'exécuter dans le navigateur. 🎜🎜🎜Résumé🎜Grâce aux étapes ci-dessus, nous pouvons déployer et mettre en ligne le projet développé basé sur Vue3+TS+Vite afin qu'il puisse s'exécuter sur le serveur. J'espère que cet article pourra vous être utile et je souhaite que votre projet se déroule sans problème ! 🎜🎜Ce qui précède concerne les compétences de développement Vue3+TS+Vite : comment déployer et mettre en ligne le projet. 🎜🎜(L'article ci-dessus est à titre de référence seulement, l'opération spécifique doit être ajustée en fonction de la situation réelle)🎜

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!