前端nginx配置

本文來自我的內部分享，整理發出來。

 

1.安裝
菜鳥教程：https://www.runoob.com/linux/nginx-install-setup.html
需要下載PCRE，需要編譯安裝。

2.配置文件 /nginx/conf
我們關注 nginx.conf文件

http{
    server{
        location /a {
            root /a
        }
        location /b {
              alias /a
         }
    }
}

　　

location 匹配路徑{
    root/alias 指向的文件路徑
}

　　

匹配路徑：

~：正則
^~：唯一匹配，優先匹配

/ 通用匹配

----------
root和alias區別：

location   /test/  {
      alias    /usr/local/;
}
location   /test/  {
      root    /usr/local/;
}

　　

同樣請求：/test/1.jpg

alias 找/usr/local/1.jpg這個文件
root 找/usr/local/test/1.jpg

出現404，找/nginx/log/error.log
3.vue路由遇到nginx
對於history模式（我們的項目）

location   /  {
      root    /usr/local/;
      try_files $uri $uri/ /index.html;
}

　　

對於hash模式（默認）不用寫try_files

location   /  {
      root    /usr/local/;
      index  index.html
}

　　

4.命令

/nginx/sbin/nginx                      # 啟動
/nginx/sbin/nginx -s reload            # 重新載入配置文件
/nginx/sbin/nginx -s reopen            # 重啟 Nginx
/nginx/sbin/nginx -s stop              # 停止 Nginx

　　

/nginx前面有路徑，安裝時候的位置。

其中，/nginx/sbin/nginx -s reopen 並不會重新加載新的配置文件

/nginx/sbin/nginx -s reload  可以重新加載配置文件

5.我們現在的配置

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #匹配用戶端，vue vue-router:history項目
        location / {
       root   /home/frontuser/front_project/commercial_service/dist;
       try_files $uri $uri/ /index.html;
        }

        #匹配static
       location ^~ /static/ {
            alias /usr/local/static/;
        }

        #匹配后台管理系統，vue,vue-router:history
       location ^~ /admin/ {
       alias   /home/frontuser/front_project/commercial_service_admin/dist/;
       index index.html;
       try_files $uri $uri/ /admin/index.html;
       }
 }

　　這樣實現了2個vue項目，路由history模式的部署，一個的訪問路徑是根路徑：/，一個是二級目錄：/admin

　　管理后台項目commercial_service_admin的publicPath要做改變，對於vue-cli3來說，修改vue.config.js為：

　　

commercial_service_admin/vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/'
}