项目部署

前端项目配置

如果我们的前端项目不是直接放在服务器的根目录

同时还要修改项目的router配置，新建 new Router是修改{mode:'history',base:'/admin/',routes}这里也与上面都保持一直即可,

项目打包

npm run build

默认打包生成的文件为dist，自己也可以修改vue.config.js outputpath,将打包生成好的 dist 目录重命名为 admin

Nginx 部署项目

将命名好的 admin 前端项目放到 Nginx 的 html 目录下去

配置修改：

修改端口号为 8008
root目录为 html
location地址为 /admin
处理前端api配置
处理前台路由history模式刷新404的问题


#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       8008;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        # 配置我们的 admin 的前台服务 比如 localhost:8008/admin/index.html
        location ^~ /admin {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            try_files $uri $uri/ /admin/index.html;
        }

        location ^~ /user {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            try_files $uri $uri/ /user/index.html;
        }

        # 修改前端路由请求接口转发
        location /api {
            proxy_pass http://192.168.110.49:9999;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-Port $server_port;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }

        #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;
        }
    }
}

最后 nginx -s reload重启配置即可

nginx 重定向

rewrite指令

rewrite指令：可以使用在server，location，if区域

语法：rewrite regex replacement flag

如果替换的字符串以 http:// 开头，请求将被重定向，并且不再执行多余的rewrite指令

尾部的标记(flag)可以是以下的值

last - 完成重写指令，之后搜索相应的URI或location。
break - 完成重写指令。
redirect - 返回302临时重定向，如果替换字段用http://开头则被使用。
permanent - 返回301永久重定向

把默认请求转发到/admin。 url也会重写

常见命令

nginx #打开 nginx
nginx -t    #测试配置文件是否有语法错误\
nginx -s reopen #重启Nginx\
nginx -s reload   #重新加载Nginx配置文件，然后以优雅的方式重启Nginx\
nginx -s stop  #强制停止Nginx服务\
nginx -s quit  #优雅地停止Nginx服务（即处理完所有请求后再停止服务）

try_files详解

try_files的语法规则

格式1：try_files file ... uri; 格式2：try_files file ... =code

解释

按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理
查找路径是按照给定的root或alias为根路径来查找的
如果给出的file都没有匹配到，则重新请求最后一个参数给定的uri，就是新的location匹配
如果是格式2，如果最后一个参数是 = 404 ，若给出的file都没有匹配到，则最后返回404的响应码

举例说明

location /images/ {
    root /opt/html/;
    try_files $uri   $uri/  /images/default.gif; 
}

比如,请求 127.0.0.1/images/test.gif 会依次查找

文件/opt/html/images/test.gif
文件夹 /opt/html/images/test.gif/下的index文件
请求127.0.0.1/images/default.gif

注意事项：try-files 如果不写上$uri/，当直接访问一个目录路径时，并不会去匹配目录下的索引页即访问127.0.0.1/images/ 不会去访问 127.0.0.1/images/index.html

其他用法：

location / {
    try_files /system/maintenance.html
              $uri $uri/index.html $uri.html
              @mongrel;
}

location @mongrel {
    proxy_pass http://mongrel;
}

以上中若未找到给定顺序的文件，则将会交给location @mongrel处理（相当于匹配到了@mongrel来匹配）

Nginx命令及Vue项目 History模式部署