一、使用Vite创建Vue3项目
1.全局安装vite,使用命令npminstallvite-g
2.创建vue3项目,使用命令npmcreatevite
latest,确认项目名称,选择Vue及TypeScript
3.使用用vscode打开项目,运行命令npminstallnpmrundev
4.整个项目目录结构如下:
5.访问页面
二、将打包项目发布到Nginx
1.将打包后文件的路径由绝对路径修改为相对路径,需要修改vite.config.js文件,添加base设置,值为”./”
同时修改根目录下的index.html文件,将link和script标签中的路径前面加上.
2.使用打包命令npmrunbuild
3.确保CentOS服务器上已经安装Nginx
whereisnginx查看nginx的位置
systemctlstatusnginx查看nginx的状态
systemctlrestartnginx重新启动nginx
systemctlstartnginx启动nginx
systemstopnginx停止nginx
找到nginx配置文件目录/usr/local/nginx/conf,修改nginx.conf文件,增加二级目录配置
4.重新启动nginx,然后访问地址,一切正常