1、初始化Vue项目
使用Vue-cli脚手架初始化一个最基本的Vue项目,命令如下:
vue create myproject
运行:
npm install
npm run serve
注意,如果是用一个已经完成的项目的话:
解压以后,删除lock和node文件
进入最里面的文件夹运行项目(否则报错)
在执行npm install和npm run serve
2、服务器安装nginx
(1)先查看服务器是否有nginx
whereis nginx
(2)安装nginx
1、2、3步https://blog.csdn.net/weixin_46483006/article/details/125759158?spm=1001.2014.3001.5502
(3)查看nginx安装目录
whereis nginx
或者使用命令查看nginx版本号,出现版本号也代表安装成功。
nginx -v
3、启动nginx
(1)启动
服务器安装号nginx后,我们尝试启动它
第一次运行nginx的时候,执行nginx,不是nginx -s reload
nginx
直接输入nginx即可启动服务,打开浏览器,访问服务器地址
这里访问默认的是80端口,因为nginx服务就是默认的80端口,如果不能访问,大致有几种原因:
nginx未启动
服务器安全组未加入80端口
nginx配置错误
(2)停止
nginx -s stop
(3)重启
nginx -s reload
4、修改配置文件
查看nginx配置文件nginx.conf位置:
nginx -t
修改nginx配置文件,参考下面文章中的第4步(注意修改完配置文件以后需要重启):
https://blog.csdn.net/weixin_46483006/article/details/125759158?spm=1001.2014.3001.5502
如果想上传大文件,还需要在nginx.conf里面配置:
client_max_body_size 1024m;
5、新建部署文件的文件夹
假如文件路径为:/home/www/dist
cd /home
mkdir www
6、打包部署vue项目
使用vue打包命令,生成dist文件夹:
npm run build
如果报错如下:
打开文件查看:
则用如下打包命令:
npm run build:prod
将打包好的文件放到/home/www路径下