1.服务器安装Nginx
Nginx是一款轻量级的Web服务器、反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用,我们的网站部署到Nginx服务器上。当然也可以选择其它web服务器,这里我们就使用主流的Nginx。
我这里的服务器是Centos系统,故已Centos为例。
(1)先查看服务器是否有ngi
命令如下:
whereis nginx
如果出现如下界面,则代表未安装nginx,否则可跳过本节。
(2)安装nginx
命令如下:
yum install -y nginx
如果未配置yum源的,可参考网上如何使用yum安装nginx,出现如下界面则代表安装完成。
(3)查看nginx安装目录
命令如下:
whereis nginx
或者使用命令查看nginx版本号,出现版本号也代表安装成功。
输入命令:
nginx -v
如果不能全局使用nginx指令,那么可能是环境变量没有配置,具体配置方法可参考网上,这里不做过多解释。
2.启动nginx
(1)启动
服务器安装号nginx后,我们尝试启动它
命令如下:
nginx
直接输入nginx即可启动服务,打开浏览器,访问服务器地址,出现如下界面则代表启动成功。
这里访问默认的是80端口,因为nginx服务就是默认的80端口,如果不能访问,大致有几种原因:
- nginx未启动
- 服务器安全组未加入80端口
- nginx配置错误
(2)停止
停止nginx服务,命令如下:
nginx -s stop
此时访问浏览器则无法访问:
(3)重启
重启nginx服务,一般用于修改配置文件之后,命令如下:
nginx -s reload
3.修改nginx配置
找到nginx配置文件存放位置,命令如下:
whereis nginx
此时/etc/nginx则是nginx配置文件存放位置,进入该文件夹:
nginx.conf则是默认配置文件,编辑该文件:
上面界面我们基本上不用改什么,重要的是server这个对象,可以看到默认监听的是80端口,所以我们直接访问服务器ip即可,接下来我们改为9000端口:
重启nginx,命令如下:
nginx -s reload
此时访问时则需要带上端口号(需要服务器安全组开启9000端口),访问地址:http://ip:9000:
我们还需要注意的一个地方就是root字段,该字段后面跟着的就是网站页面路径,也就是网站存放的路径。
假设我们网站的存放路径为:
/home/www/dist
修改root,结果如下:
这个时候重启nginx,我们的网站无法访问了,因为我们没有这个文件夹。
4.新建网站文件夹
刚刚我们设置了网站存放的文件夹路径为:
/home/www/dist
此时我们需要在服务器上新建www文件夹:
cd /home
mkdir www
我们没有新建dist文件夹,因为我们待会儿vue项目打包就会生成dist文件夹。
5.打包部署vue项目
(1)打包网站
使用vue打包命令,生成dist文件夹:
npm run build
(2)上传至服务器
我们可以使用ftp工具将dist文件夹上传至/home/www目录下,当然也可以使用命令:
scp -r dist/ root@139.9.219.136:/home/www
在我们的项目目录下用打开git命令行,将本地的dist整个文件夹复制到服务器,需要主要的时scp命令window不支持,所以使用了git命令行工具。
此时无需重启nginx,刷新浏览器,可以看到我们的网站已经部署成功了。
6.解决刷新路由404问题
当我们切换路由后,然后在刷新页面,会出现404的情况。
这是因为我们vue项目采用了history的路由方式,至于原因主要是vue是单页面应用,细节部分大家可自行下来了解。
解决问题的办法:
(1)将路由模式改为hash
(2)修改nginx配置:
location / {
try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}
修改之后重启nginx,这个时候刷新浏览器则不会出现404了。
使用xshell上传文件 , 不使用 xftp 和 git 上传文件
~输入命令 cd usr/local/nginx/vue(路径是需要部署到的位置)到需要部署的目录下就可以开始上传了
vue输入命令 rm -rf dist 删除dist目录以及它所包含的所有内容(如果没有可以省略这一步,dist是我的目 录,改成自己的目录)
vue输入命令 rz 会弹出选择文件的框,选择需要上传的文件,等待上传完成
vue输入命令 unzip dist.zip 解压我上传的压缩包(同样dist.zip也是我的目录,自行更改自己的目录)等待解压完成
vue输入命令 cd usr/local/nginx/sbin (同样这是我的重启路径)
sbin输入命令 ./nginx -s reload 重启,到这一步就完成了,可以在服务器上访问到了