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

常见命令

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

项目部署

前端项目配置

若是咱们的前端项目不是直接放在服务器的根目录

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

项目打包

npm run build
复制代码

默认打包生成的文件为dist，本身也能够修改vue.config.js outputpath,将打包生成好的 dist 目录重命名为 admin

Nginx 部署项目

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

配置修改：

1. 修改端口号为 8008
2. root目录为 html
3. location地址为 /admin
4. 处理前端api配置
5. 处理前台路由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重启配置便可