轻量应用服务器部署vue项目

首先我已经拥有一个轻量云服务器了.windows2012的版本&＃xff1a;

为了将我们打包好的vue项目传到服务器&＃xff0c;我们要先在服务器搭建FTP服务。
具体步骤可以参考官方文档&＃xff0c;官方文档的教程十分清楚详细&＃xff0c;按照步骤来就不会出错&＃xff1a;https://cloud.tencent.com/document/product/1207/47639

要记得自己创建好的用户名和密码&＃xff0c;之后建立FTP连接的时候需要。

在服务器的防火墙选项中添加一个开放所有端口的的规则&＃xff1a;

运行npm命令打包vue项目&＃xff0c;打包完后会生成一个dits文件夹&＃xff0c;这个文件夹就是我们之后要上传到服务器运行的文件夹&＃xff1a;

首先要下载 File Zilla&＃xff1a;https://filezilla-project.org/&＃xff0c;选client的下载

安装时全部选择默认即可。安装完成后
打开File Zilla

新建站点&＃xff0c;输入服务器的公网ip&＃xff0c;端口号为21&＃xff0c;输入之前设置的账号密码&＃xff0c;就能建立连接了&＃xff1a;

建立完链接后&＃xff0c;我们就可以来到打包好的dist路径&＃xff0c;右键选择上传&＃xff1a;

上传成功后&＃xff0c;我们登陆服务器就能看见设置的文件夹下有我们打包好的dist文件夹&＃xff1a;

官网&＃xff1a;http://nginx.org/en/download.html 可以下载Stable version
解压下载下来的压缩包&＃xff0c;将dist文件夹复制到与nginx.exe平级的目录&＃xff0c;如图&＃xff1a;

修改conf文件夹下的nginx.conf文件&＃xff0c;修改端口号和根路径&＃xff1a;

如果只修改了这些配置的话&＃xff0c;在部署好项目后如果在二级页面进行刷新操作&＃xff0c;会报错404&＃xff0c;所以我们还需要配置&＃xff1a;

server {
listen YYYY; //自己设置的端口号
server_name 192.168.XXX.XXX; //在黑窗口下ipconifg后出现的IPv4地址复制

location /{
root E:/website_wap/dist/; //项目打包后的路径
index index.html index.htm;
try_files $uri $uri/ /index.html; //解决刷新页面变成404问题的代码
}
}


这样我们就解决了刷新页面变成404的问题啦。

运行项目

回到nginx.exe目录下&＃xff0c;cmd运行start nginx命令 &＃xff0c;我们的项目就运行起来了&＃xff0c;通过服务器的公网ip加端口号就能访问到我们打包好的项目。下面是一些常见的nginx的命令&＃xff1a;

其他相关常用命令
start nginx 启动nginx
nginx -s quit 安全关闭
nginx -s stop 强制关闭
nginx -s reload 改变配置文件时&＃xff0c;重启nginx工作进程&＃xff0c;使配置生效
nginx -s reopen 打开日志文件
nginx -v 查看版本
nginx -h 查看帮助信息