前端部署项目

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路径下

---

参考链接：
https://zhuanlan.zhihu.com/p/431796992