轻量应用服务器部署vue项目
创始人
2024-04-15 06:12:18
0

首先我已经拥有一个轻量云服务器了.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问题的代码}   }

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

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...