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重啓配置便可