Compétences en développement Vue3+TS+Vite : comment déployer et mettre en ligne le projet-Voir.js-php.cn

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

WBOY

Libérer： 2023-09-08 12:54:20

original

1738 Les gens l'ont consulté

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

Copier après la connexion

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

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: './',
})
```
Copier après la connexion
Après avoir défini cela, le projet utilisera le chemin actuel. comme chemin de base. Emballez-le.
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/',
}
```
Copier après la connexion
这样设置之后，打包后的文件将会自动放在/your-project-name/目录下。

三、项目构建与打包

构建项目
执行以下命令，将项目构建为可部署的静态文件：
```
npm run build
```
Copier après la connexion
构建完成后，在项目根目录下会生成一个dist文件夹，里面存放着打包后的静态文件。
本地测试
可以通过以下命令在本地启动一个服务器来测试打包后的项目：
```
npm install -g http-server
cd dist
http-server
```
Copier après la connexion
然后在浏览器中打开http://localhost:8080即可查看项目效果。

四、部署到服务器

将打包后的文件上传到服务器上
将dist文件夹中的所有文件上传到你的服务器上，可以使用FTP工具或者其他方法进行上传。确保文件上传到了正确的目录下。
配置服务器
在你的服务器上，需要配置一个nginx（或其他类似的服务器软件）来处理静态文件的请求。假设你使用的是nginx，则可以在配置文件中添加以下内容：
```
server {
  listen 80;
  server_name your-domain.com;

  location / {
 root /path/to/your-project/;
 try_files $uri $uri/ =404;
  }
}
```
Copier après la connexion
注意将your-domain.com替换为你的域名，/path/to/your-project/替换为你上传项目的目录。
启动服务器
重启nginxrrreee