使用Vite创建Vue3项目并打包发布到

中科白癜风医院爱心公益 https://jbk.39.net/yiyuanfengcai/tsyl_bjzkbdfyy/5080/

一、使用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,然后访问地址,一切正常




转载请注明:http://www.aierlanlan.com/rzgz/8283.html