前端部署服务器 VUE项目

此处是用VUE项目我实例进行的操作讲解，如若不会VUE可以自行学习或者有其他项目或者html页面也可进行部署同理可行，下面是 具体步骤

1).有一个Vue或者其他项目

2).服务器安装Nginx

(1).先查看有没有安装Nginx

命令如下：

whereis Nginx

<!--出现目录表示安装成功或者已经安装过nginx-->

(2).安装Nginx

命令如下：

yum install -y nginx

<!--yum/npm安装区别不大-->

(3).查看版本

命令如下：

nginx -v

<!--出现版本号-->

(4).启动Nginx

命令如下：

nginx

<!--通过ip在浏览器访问，默认为80端口-->

(5).停止Nginx

命令如下：

nginx -stop

(6).重启Nginx

命令如下：

nginx -reload

3).修改nginx配置

(1).查找配置文件位置

先查看nginx安装目录,命令如下：

whereis nginx

<!--如果知道**nginx.conf**文件夹的位置查看目录操作可以不进行。-->

(2).进入文件夹找到 nginx.conf 文件

nginx的配置文件是放在 etc/nginx这个文件夹中的，命令如下：

cd /etc/nginx

(3).修改nginx.conf文件

编辑nginx.conf文件，命令如下：

vim nginx.conf

主要是文件中的server对象的修改

server{
  listen 	80 default_server;
  listen 	[::]:80 default_server;
  server_name 	_;
  root 	/usr/share/nginx/html;
  # Load configuration files for the default server block
  include /ect/nginx/default.d/*.conf;
  location /{
    
	}
  error_page 404 /404.html;
    location= /40x.html{
    }
   error_page 500 502 503 504 /50x.html;
    location= /50x.html{} 
}

修改 linsten即为修改端口，例如：

​ 将80端口改为9000端口

修改 root即为修改访问文件地址，例如：

​ 将 /usr/share/nginx/html 改为 /home/www/dist

(4).保存修改nginx.conf文件

命令如下：

wq

4).新建网站存放位置文件夹

在上面我们修改nginx.conf文件访问位置为 /home/www/dist

cd /home 			/*进入home文件夹*/
mkdir www 		/*创建www文件夹*/

上传：

可以使用ftp文件图像工具上传也可以用命令上传，命令和事例如下：

scp 文件名 远程主机用户名@ip:需要上传到远程主机的路径
scp -r 文件夹 远程主机用户名@ip:需要上传到远程主机的路径

上传文件
scp ./dist.zip root@0.0.0.0:/home/www

上传文件夹
scp -r ./dist root@0.0.0.0:/home/www

如果上传的是压缩包需要解压和删除等，命令如下：

解压
unzip dist.zip

删除压缩包
rm -f dist.zip

删除文件夹
rm -rf /dist

<!--windows不支持scp命令所以要用Git命令行工具-->

5).解决刷新路由404问题

切换路由后刷新页面报错404情况，这是由于vue项目采用history路由方式，由于vue是单页面应用只有一个index.html切换路由后找不到路径，解决办法如下：

(1).vue项目内路由设置改为hash模式

(2).修改nginx配置

location / {
  try_files $uri $uri/ /index.html; /*解决页面刷新404问题*/
}

修改后重启。。。