Vue项目部署–nginx配置
网上有一堆实例， 但是history模式大部分测试都无效， 还是亲自动手试试！
## 一、 打包项目
```
npm run build
```
打包结束，会生成 dist 文件夹. 将打包好的文件，复制到nginx目录。
> dist
> D:\nginx\nginx-1.16.1 (本人nginx存放路径)
## 二、Nginx
### 2.1 vue hash 模式
1. 配置修改
配置文件在 nginx.conf中，具体目录如下：注意以下地址为本人存放nginx的目录
D:\nginx\nginx-1.16.1\conf\nginx.conf (本人nginx存放路径)server {
# 服务器端口
listen 80;
# 服务器名称
server_name localhost;
# 路径配置
location / {
# 相对路径配置，基于nginx启动的位置
root dist;
index index.html;
}
# 后端接口，反向代理
location ~ /rest {
# 反向代理
proxy_pass http://ip:port;
}
}2. 启动
cd 到目录,例如我的nginx在以下目录，执行cmd命令面板
> D:\nginx\nginx-1.16.1 (本人nginx存放路径)
```
start nginx
```
3. 浏览器访问
```
// 默认会跳到对应的路由，vue-router重定向，可能变成这样！
```
# 2.2 vue history 模式
1. 配置修改
配置文件在 nginx.conf中，具体目录如下：注意以下地址为本人存放nginx的目录
> D:\nginx\nginx-1.16.1\conf\nginx.conf (本人nginx存放路径)
```
server {
# 服务器端口
listen 80;
# 服务器名称
server_name localhost;
# 路径配置
location / {
# 相对路径配置，基于nginx启动的位置
root dist;
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命令面板
> D:\nginx\nginx-1.16.1 (本人nginx存放路径)
```
start nginx
```
3. 浏览器访问
```
// 默认会跳到对应的路由，vue-router重定向，可能变成这样！
```
附完整的conf配置文件
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 8400;
server_name localhost;
#重写url路径
#rewrite ^/api/(.*)$ /api/$1;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root D:\project\zdt_project\branches\init_20200715\02.project\web\frontadmin\dist; #vue项目的打包后的dist;
# 需要指向下面的@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;
index index.html index.htm;
}
# 对应上面的@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;
}
#将api开头的 交给网关去处理
location /api/{
#rewrite ^/api/(.*)$ /api/$1;
proxy_pass http://127.0.0.1:8083;
proxy_set_header host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header referer "-";
proxy_redirect default;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
