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

首先我已经拥有一个轻量云服务器了.windows2012的版本:
轻量应用服务器部署vue项目_第1张图片

1.搭建 FTP 服务

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

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

2.设置防火墙

在服务器的防火墙选项中添加一个开放所有端口的的规则:
轻量应用服务器部署vue项目_第2张图片

轻量应用服务器部署vue项目_第3张图片

3.打包vue项目为dist

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

轻量应用服务器部署vue项目_第4张图片
轻量应用服务器部署vue项目_第5张图片

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

首先要下载 File Zilla:https://filezilla-project.org/,选client的下载
轻量应用服务器部署vue项目_第6张图片
安装时全部选择默认即可。安装完成后
打开File Zilla
轻量应用服务器部署vue项目_第7张图片
新建站点,输入服务器的公网ip,端口号为21,输入之前设置的账号密码,就能建立连接了:
轻量应用服务器部署vue项目_第8张图片

5 上传dist文件夹到服务器

建立完链接后,我们就可以来到打包好的dist路径,右键选择上传:
轻量应用服务器部署vue项目_第9张图片
上传成功后,我们登陆服务器就能看见设置的文件夹下有我们打包好的dist文件夹:
轻量应用服务器部署vue项目_第10张图片

6.下载nginx

官网:http://nginx.org/en/download.html 可以下载Stable version
解压下载下来的压缩包,将dist文件夹复制到与nginx.exe平级的目录,如图:
轻量应用服务器部署vue项目_第11张图片

7.修改nginx.conf文件

修改conf文件夹下的nginx.conf文件,修改端口号和根路径:
轻量应用服务器部署vue项目_第12张图片
如果只修改了这些配置的话,在部署好项目后如果在二级页面进行刷新操作,会报错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问题的代码
        }   
    }


这样我们就解决了刷新页面变成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 查看帮助信息

你可能感兴趣的:(前端基础,vue.js,前端,javascript)