本篇经验将和大家介绍如何使用Vite创建Vue3项目并打包发布到Nginx，希望对大家的工作和学习有所帮助！品牌型号：DELL 台式机系统版本：Windows 10软件版本：Vue 3.0使用Vite创建Vue3项目1/5分步阅读

全局安装vite，使用命令 npm install vite -g，如下图所示：

2/5

创建vue3项目，使用命令 npm create vite@latest ,确认项目名

称，选择Vue及TypeScript，如下图所示：

3/5

使用vscode打开项目，依次运行命令

npm install

npm run dev

，如下图所示：

4/5

整个项目目录结构，如下图所示：

5/5

访问页面，如下图所示：

将打包项目发布到Nginx1/6

将打包后文件的路径由绝对路径修改为相对路径，需要修改vite.config.js文件，添加base设置，值为”./”，如下图所示：

2/6

同时修改根目录下的index.html文件，将link和script标签中的路径前面加上. ，如下图所示：

3/6

使用打包命令 npm run build，如下图所示：

4/6

确保CentOS服务器上已经安装Nginx，如下图所示：

常见nginx命令：

whereis nginx 查看nginx的位置

systemctl status nginx 查看nginx的状态

systemctl restart nginx 重新启动nginx

systemctl start nginx 启动nginx

system stop nginx 停止nginx

5/6

找到nginx配置文件目录 /usr/local/nginx/conf ，修改nginx.conf文件，增加二级目录配置，如下图所示：

6/6

重新启动nginx，然后访问地址，一切正常，如下图所示：

VITE创建VUE3项目打包发布到NGINX