1. 程式人生 > 實用技巧 >Nginx 前端專案配置(vue)及介面代理

Nginx 前端專案配置(vue)及介面代理

Nginx是目前用的比較多的一個前端伺服器

其優點是配置簡單修改一下server就能用
併發效能比較好,具體怎麼好就看這個吧
開擼

1、找到nginx (liunx系統,已安裝)
whereis nginx

2、找到位置並進入
nginx: /usr/local/nginx
cd /usr/local/nginx

3、修改conf/nginx.conf(提示許可權不夠的前面加 sudo)
vi conf/nginx.conf

4、直接在server裡面修改

`
server {
# listen後面跟上監聽的埠號
listen 80;
server_name localhost;

    # 這個是 根路徑下的配置 (下面的@router跟他是一起的)(vue專案必須)
    location / {
            # 這個是檔案的根路徑,html/vue_demo/dist 換成你自己的檔案路徑
            # root是根路徑的意思, 資料夾我是放再nginx下的html資料夾裡面了
            root   html/vue_demo/dist;
            # 當前資料夾的檔案格式
            index  index.html;、
            # 是vue這樣專案的加上這個,避免重新整理就地址錯誤
            try_files $uri $uri/ @router;
    }
        
    # 這個是配置的 www.xxx.com/admin 這樣子路徑下顯示另外一個專案的配置
    # 需要了就去掉 程式碼前面的 #
    #location /admin {
             # 此為新應用index,static目錄,同時注意這裡是alias,不是root,還有以及new的後面有/結尾
             # html/vue_demo/admin/ 更改為自己的資料夾路徑
    #        alias html/vue_demo/admin/;
             # /admin/index.html 的admin是必須加的,區分子路徑的標識
    #        try_files $uri $uri/ /admin/index.html;
    #}
    # 配置普通靜態網站的, vue就不需要不開
    #location /static {
    #      alias html/wuyan/static/;
    #}
    #跟上上面跟路由是一起的 (vue專案必須)
    location @router {
            rewrite ^.*$ /index.html last;
    }
    # 設定介面代理,適用vue專案中配置反向代理的情況,不需要不開
    # location /dev-api {
    #         add_header Access-Control-Allow-Methods *;
    #         add_header Access-Control-Allow-Origin $http_origin;
    #         add_header Access-Control-Allow-Credentials true;
              # 替換為自己的介面地址 http://xxxx.xx.xx.x:xxxx
    #         proxy_pass http://xxxx.xx.xx.x:xxxx;
    # }

}
`

5、總結:這裡面滿足了基本的nginx配置(包括普通靜態頁面、vue這樣的需要打包的專案、子路徑配置、介面代理避免跨域),
這個教程是針對前端新手的。描述的不好的可以提,積極改正,重新做人 sky