Nginx 前端專案配置(vue)及介面代理
阿新 • • 發佈:2020-08-08
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