前端打包部署

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 重启，到这一步就完成了，可以在服务器上访问到了