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

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

1.搭建 FTP 服务

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

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

2.设置防火墙

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

3.打包vue项目为dist

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

4.与轻量应用服务器建立FTP连接

首先要下载 File Zilla：https://filezilla-project.org/，选client的下载

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

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

5 上传dist文件夹到服务器

建立完链接后，我们就可以来到打包好的dist路径，右键选择上传：

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

6.下载nginx

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

7.修改nginx.conf文件

修改conf文件夹下的nginx.conf文件，修改端口号和根路径：

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

    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问题的代码
        }   
    }


1
2
3
4
5
6
7
8
9
10
11
12

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

运行项目

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

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