nginx https 一个端口代理多个前端项目

打包修改
！！！注意：第一个location root 调用的项目不用修改打包路径，直接用 '/'，其他项目或者需加 /mobile 路径

javascript 复制代码

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
//后端接口
    upstream backServer {
        server 10.0.0.249:8001  max_fails=5 fail_timeout=15s weight=1;
        keepalive 256;
     }
    server {
        listen       8004 ssl;
        server_name  localhost;
        ssl_certificate      /usr/local/nginx/conf/cert/lingyiitech.com.pem;
        ssl_certificate_key  /usr/local/nginx/conf/cert/lingyiitech.com.key;
        ssl_session_timeout 5m;
         ssl_protocols TLSv1.2;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_prefer_server_ciphers on;
        charset utf-8;
//PC主项目
        location / {
            root    /www/ck-study/pc/dist;
            index   index.html index.htm;
        } 
//移动端副项目
	location /mobile {
            alias  /www/ck-study/mobile/dist/;
            try_files $uri $uri/ /dist/index.html/;
            index index.html index.htm;
        }
//文件代理
        location /file/ {
            alias  /www/ck-study/ck-file/;
            autoindex on;                         # 启用自动首页功能
            autoindex_format html;                # 首页格式为HTML
            autoindex_exact_size off;             # 文件大小自动换算
            autoindex_localtime on;               # 按照服务器时间显示文件时间
            default_type application/octet-stream;  # 将当前目录中所有文件的默认MIME类型设置为
            sendfile on;                          # 开启零复制文件传输功能
            sendfile_max_chunk 1m;                # 每个sendfile调用的最大传输量为1MB
            tcp_nopush on;                        # 启用最小传输限制功能
            directio 5m;                          # 当文件大于5MB时以直接读取磁盘的方式读取文件
            directio_alignment 4096;              # 与磁盘的文件系统对齐
            output_buffers 4 32k;                 # 文件输出的缓冲区大小为128KB
            max_ranges 4096;                      # 客户端执行范围读取的最大值是4096B
            send_timeout 20s;                     # 客户端引发传输超时时间为20s
            postpone_output 2048;                 # 当缓冲区的数据达到2048B时再向客户端发送
            chunked_transfer_encoding on;         # 启用分块传输标识
        }
//API接口代理
        location /api/ {
            proxy_connect_timeout   18000;
            proxy_send_timeout      18000;
            proxy_read_timeout      18000;
            root    html;
            index   index.html index.htm;
            proxy_pass http://backServer;
            add_header Cache-Control no-cache;
            add_header Pragma no-cache;
        }
        
    }
}

移动端配置要

**location：**配置url路径匹配关系，这里配置 /mobile 就是定义了一个标识，在有多个vue服务时，可以做区分
**alias：**指定静态文件目录的根路径
**index：**指令用于指定在请求的URL中未指定文件名时要使用的默认文件名
**try_files：**意思是优先根据浏览器输入的文件路径进行查找，如果找不到重定向到index.html文件

针对副项目 vue打包时要加一个 base: env.VITE_MODE === 'production' ? '/mobile' : '/',

javascript 复制代码

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname)
  return {
    plugins: [vue()],
    base: env.VITE_MODE === 'production' ? '/mobile' : '/',
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      }
    },
    css: {
      // 全局样式配置
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/base.scss";`,
        },
        less: {
          additionalData: `@import "@/assets/base.less";`,
        }
      }
    },
    build: {
      sourcemap: false, // 不生成 source map 
      terserOptions: { 
        compress: { // 打包时清除 console 和 debug 相关代码
          drop_console: true,
          drop_debugger: true,
        },
      },
    },
    server: {
      host: 'localhost',
      port: '8080',
      open: true, 
      proxy: {
        '/api': {
          target: env.VITE_URL, 
          changeOrigin: true, 
          ws: true, // 支持 websocket
          rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
        }
      }
    }
  }
})