在Linux环境下 nginx 部署vue打包项目

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中代理aoq
	location /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;
     }
 }


 
#  默认跳转到https
  server {
        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,
   
    
}

前提：在程序内可以成功访问到线上线下后端接口数据