准备工作：登录Os服务器，以root用户
首先需要安装nginx
yum install nginx -y
修改默认配置文件：这里是使用vim进行编辑，不熟悉的可自行查阅资料
vim /etc/nginx/nginx.conf
1、进入后按“i”进入编辑模式；
2、修改完成后按esc键退出编辑模式。
3、输入:wq保存并退出。
4、中途修改错了可以按:q!强制退出（不保存）
5、如果不是以root用户进入可能提示无法修改，此时可以按:q!强制退出。
默认.conf文件修改的地方
打开后按"i"进入编辑模式，修改如下：
server {
listen 80;#监听端口
server_name localhost;#指定域名或ip可写多个（多个之间用空格分隔）
index index.html index.htm index.php;#index用来设定访问的默认首页地址
root /usr/share/nginx/html;#指定站点根目录
charset utf-8;#指定网页的编码格式
access_log logs/www.ixdba.net.access.log main;#access_log用来指定此虚拟主机的访问日志存放路径，最后的main用于指定访问日志的输出格式。
##
#location支持正则表达式匹配，也支持条件判断匹配，
#用户可以通过location指令实现Nginx对动、静态网页进行过滤处理。
#使用location URL匹配配置还可以实现反向代理，用于实现PHP动态解析或者负载负载均衡。
##
#php的这段location是对此虚拟主机下动态网页的过滤处理，也就是将所有以.php为后缀的文件都交给本机的8080端口处理
location ~ .*\.(php|php5)?$
{
fastcgi_pass 127.0.0.1:8080;
fastcgi_index index.php;
include fastcgi.conf;
}
##
#以下这段设置是通过location指令来对网页URL进行分析处理，所有扩展名以.gif、.jpg、.jpeg、.png、.bmp、.swf结尾的静态文件都交给nginx处理。
#expires用来指定静态文件的过期时间，这里是30天。
#
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
{
expires 30d;#指定过期时间
# access_log off;
}
#是通过location指令来对js,css文件进行分析处理，过期时间为15天
location ~ .*\.(js|css)?$
{
expires 15d;
# access_log off;
}
##
#下面这段用来指定错误页面,如果不需要可去掉。
##
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
配置好后就无需经常修改，如需新增配置，可新建配置文件，目录：/etc/nginx/conf.d/，例如新建vupage.conf文件，针对vue项目配置，如下：
-
这里是针对同一端口配置多个vue项目
server { listen 7080;#监听端口 server_name localhost;#监听域名 charset utf-8;#指定网页的编码格式 #网站的配置 location / {#项目一 root /usr/share/nginx/html/dist; index index.html; try_files $uri $uri/ /index.html; } ## #注意：这里的/admin需和vue.config.js中(vue-cli3)以及router=>index.js中的base项一致。 # ## location /admin {#项目2 alias /usr/share/nginx/html/vuepage;#注意配置多项目，这里必须以alias定义 index index.html; try_files $uri $uri/ /admin/index.html; } }
每次修改完成后需要重启nginx
#nginx操作命令
nginx 启动
nginx -s stop 停止
nginx -s reload 重启服务
vue项目中需要改动的位置：
#针对vue-cli3.0搭的项目
#vue.config.js
module.exports = {
publicPath: '/admin', //用来配合nginx一个端口部署多个项目用
}
#router=>index.js
const router = new VueRouter({
mode: 'history', //去掉url中的#(使用此参数需要慎重，build后项目部署上线刷新会导致找不到路径404等错误，需要nginx配合设置找不到路径时统一回到index.html中)
base:'/admin',//这里和vue.config中的配作一致，用来配合nginx一端口部署多项目用。
routes: Routers
})
#针对vue-cli2.0搭的项目
找到config/index.js文件，找到"build"部分，修改成如下：
build:{
assetsPublicPath:'/admin'
}
#router=>index.js
const router = new VueRouter({
mode: 'history', //去掉url中的#(使用此参数需要慎重，build后项目部署上线刷新会导致找不到路径404等错误，需要nginx配合设置找不到路径时统一回到index.html中)
base:'/admin',//这里和vue.config中的配作一致，用来配合nginx一端口部署多项目用。
routes: Routers
})
