一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。
nginx常用命令
| 命令 | 功能 |
|---|---|
| start nginx | 开启nginx |
| nginx -s stop | 快速关闭Nginx，可能不保存相关信息，并迅速终止web服务。 |
| nginx -s quit | 平稳关闭Nginx，保存相关信息，有安排的结束web服务。 |
| nginx -s reload | 因改变了Nginx相关配置，需要重新加载配置而重载。 |
| nginx -s reopen | 重新打开日志文件。 |
| nginx -c filename | 为 Nginx 指定一个配置文件，来代替缺省的。 |
| nginx -t | 不运行，而仅仅测试配置文件。nginx 将检查配置文件的语法的正确性，并尝试打开配置文件中所引用到的文件。 |
| nginx -v | 显示 nginx 的版本。 |
vue项目发布服务器的Nginx配置
1. 配置修改
首先我们使用 npm run build 来生成项目的静态页面，会在项目的根路径的dist目录下
我们将dist下的 index.html和static静态文件发布到服务器的某一目录下
比如说我们发布的是 在 usr/local/vue/page下，那么我们对于nginx的配置如下
在/usr/local/nginx/conf下打开nginx.conf
server {
# 服务器端口
listen 80;
# 服务器名称
server_name localhost;
# 路径配置
location / {
# 相对路径配置，基于nginx启动的位置
root usr/local/vue/page;
index index.html;
# 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
# Nginx知识补充：
# try_files 指令：
# try_files $uri $uri/ /index.html;
# 作用域：server location
# 语法：try_files file ... uri 或 try_files file ... = code
# 其作用是按顺序检查本地（服务器）文件是否存在，
# 返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），
# 如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
# 需要注意的是，只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部URI的指向。
# 最后一个参数是回退URI且必须存在，否则会出现内部500错误。命名的location也可以使用在最后一个参数中。
# 与rewrite指令不同，如果回退URI不是命名的location那么args不会自动保留，如果你想保留args，则必须明确声明。
# 但是其实这官方的demo是有一些需要注意的地方的。
try_files $uri $uri/ @router;
}
# 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
# 因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
# last ：相当于Apache里德(L)标记，【表示完成rewrite ！important】【将得到的路径重新进行一次路径匹配】，浏览器地址栏【URL地址不变】
# break；本条规则匹配完成后，【终止匹配 ！important】，【不再匹配后面的规则】，浏览器地址栏【URL地址不变】 一般不用这个选项！
# redirect： 返回302临时重定向，浏览器地址【会显示跳转后的URL地址】
# permanent：返回301永久重定向，浏览器地址栏【会显示跳转后的URL地址】
# 1.静态资源，去掉项目名，进行定向 \为转义， nginx 中的 / 不代表正则，所以不需要转义
rewrite (static/.*)$ /$1 redirect;
# 2.非静态资源，直接定向index.html
rewrite ^.*$ /index.html last;
}
}
# 后端接口，反向代理
location ~ /rest {
# 反向代理
proxy_pass http://ip:port;
}
}
2. 启动
cd 到目录,例如我的nginx在以下目录，执行cmd命令面板
start nginx
3. 浏览器访问
http://localhost
// 默认会跳到对应的路由，vue-router重定向，可能变成这样！
http://localhost/#/a
