nginx配置反向代理

nginx

常用命令：

在Nginx sbin目錄下 cd /www/server/nginx/sbin

• ./nginx 啟動
• ./nginx -s reload 重啟
• ./nginx -s stop 停止

配置文件：nginx.conf

user www www; worker_processes auto; error_log /www/wwwlogs/nginx_error.log crit; pid /www/server/nginx/logs/nginx.pid; worker_rlimit_nofile 51200;events{use epoll;worker_connections 51200;multi_accept on;}http{include mime.types;#include luawaf.conf;include proxy.conf;default_type application/octet-stream;server_names_hash_bucket_size 512;client_header_buffer_size 32k;large_client_header_buffers 4 32k;client_max_body_size 50m;sendfile on;tcp_nopush on;keepalive_timeout 60;tcp_nodelay on;fastcgi_connect_timeout 300;fastcgi_send_timeout 300;fastcgi_read_timeout 300;fastcgi_buffer_size 64k;fastcgi_buffers 4 64k;fastcgi_busy_buffers_size 128k;fastcgi_temp_file_write_size 256k;fastcgi_intercept_errors on;gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_http_version 1.1;gzip_comp_level 2;gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;gzip_vary on;gzip_proxied expired no-cache no-store private auth;gzip_disable "MSIE [1-6]\.";limit_conn_zone $binary_remote_addr zone=perip:10m;limit_conn_zone $server_name zone=perserver:10m;server_tokens off;access_log off;server { # dy.xmclaw.com # SSL 證書設置 # listen 80; #（http）監聽端口號listen 443 ssl; #ssl（https）監聽端口號server_name dy.xmclaw.com; #域名（瀏覽器訪問地址）ssl_certificate /www/wwwroot/ssl/7654229_dy.xmclaw.com.pem; #ssl pem文件（阿里云服務器配置域名地方獲取下載就行）ssl_certificate_key /www/wwwroot/ssl/7654229_dy.xmclaw.com.key; #ssl key文件ssl_session_timeout 5m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_prefer_server_ciphers on;# if ($http_Host !~* ^ebrand.eastobacco.com$){ # return 403; # }# if ($request_method !~* GET|POST){ # return 403; # }location / { #同一級別location 名稱不能重復root /www/wwwroot/dy_web/dist; #項目放置根目錄（vue打包dist放置位置）index index.html index.htm;autoindex off;} #反向代理，在vscode中vue.config.js中代理aoqlocation /aoq/ { proxy_pass http://127.0.0.1:9999/;#這里我的項目掛在當前服務器上，訪問后端接口是9999，沒有接接口名，就直接訪問的是本地的IP地址}} server { # erp.xmclaw.com # SSL 證書設置listen 443 ssl;ssl_certificate /www/wwwroot/ssl/5412007_erp.xmclaw.com.pem;ssl_certificate_key /www/wwwroot/ssl/5412007_erp.xmclaw.com.key; server_name erp.xmclaw.com;# 后端api接口設置location /api/ {include uwsgi_params;rewrite ^/api/(.*) /$1 break;uwsgi_pass 127.0.0.1:8002;# uwsgi_param UWSGI_SCRIPT py_contract_approval/wsgi.py;# uwsgi_param UWSGI_CHDIR /usr/src/py_contract_approval;# client_max_body_size 35m;}# 前端頁面展示location / {root /www/wwwroot/xmc_admin/dist;index index.html index.htm;# try_files $uri $uri/ /index.html;}# 靜態圖片托管location /image/ {alias /www/wwwroot/imge/;autoindex on;}}# 默認跳轉到httpsserver {listen 80;server_name dy.xmclaw.com; # rewrite ^ https:/$http_host$request_uri? permanent;}include /www/server/panel/vhost/nginx/*.conf; }

vue

vue.config.js

module.exports = {// publicPath: './',// 配置跨域請求devServer: {port: 8080,//vue地址host: 'localhost',open: true,https: false,proxy: {'/api': {target: 'http://192.168.2.250:9999',//目標網址ws: true,changeOrigin: true,//放行跨域secure: false,pathRewrite: {'^/api': ''}},'/aoq': {target: 'http://47.103.219.194:9999',ws: true,changeOrigin: true,secure: false,pathRewrite: {'^/aoq': ''}}}}, }

請求axios.js

import axios from 'axios'axios.defaults.timeout = 5000 axios.defaults.baseURL = '/api'//線下//axios.defaults.baseURL = '/aoq'//線上axios.defaults.headers.post['Content-Type'] = 'application/json';//請求頭部//路由攔截 axios.interceptors.request.use(config => {if (window.localStorage.getItem('token')) {config.headers.token = `${window.localStorage.getItem('token')}`}console.log(config)return config},err => {return Promise.reject(err)} ) // /* 函數節流 */ // function debounce (fn, wait) { // let timerId = null // let flag = true // return function () { // clearTimeout(timerId) // if (flag) { // fn.apply(this, arguments) // flag = false // } // timerId = setTimeout(() => { // flag = true // }, wait) // } // }// const authError = debounce((message) => { // window.localStorage.clear() // Message({ // message, // type: 'error' // }) // }, 1000)// const resError = debounce((message) => { // Message({ // message, // type: 'error' // }) // }, 1000) // axios.interceptors.response.use( // response => { // // console.log(response) // if (parseInt(response.data.code) === 104) { // authError(response.data.msg) // window.sessionStorage.setItem('num',1) // router.push({ // path: '/login' // }) // } else { // return response.data // } // },error=>{ // console.log(error) // resError('服務器請求出錯,請聯系管理員')// }) export default axios

api接口
我的是在api下的index.js 文件內部

import request from '@/api/axios.js' function login(data){return request({url:'/search_item_list',method:'post',data}) } function check_token(data){return request({url:"check/token",method:'post',data}) }export{login,check_token,}

前提：在程序內可以成功訪問到線上線下后端接口數據

總結

以上是生活随笔為你收集整理的在Linux环境下 nginx 部署vue打包项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。