您当前的位置：首页 > 学海无涯 > 其他网站首页其他

Vue项目使用二级目录

发布时间：2021-02-23作者：♂逸風★淩軒

一、Vue项目使用/admin/二级目录：

1、项目代码变更：

# vim vue.config.js

在module.exports模块里修改publicPath

一般

publicPath: '/',

修改为

publicPath: '/admin/',

2、修改路由配置示例

const router = new VueRouter({
  mode: 'history',
  base:'/admin/',
  routes
})

或


const createRouter = () => new Router({
  mode: 'history',
  base: '/admin/',
  routes: constantRoutes
})

3、修改代码解析层Nginx配置

server {
    listen       8081;
    server_name  localhost;
    location /admin {
        alias /usr/share/nginx/html/admin/;
        index  index.html;
        try_files $uri $uri/ @action;
    }
    location @action {
        rewrite ^.*$ /admin/index.html last;
    }
}

4、修改代理层Nginx配置

server{
    listen  80;
    server_name  admin.xxxx.cn;
    location /admin {
         proxy_pass http://127.0.0.1:8081/admin;
    }
    location / {
         rewrite ^(.*)$  http://admin.xxxx.cn/admin/ permanent;
    }
}

5、开发端调试自建Nginx配置

⑴修改本地host文件，将调试域名指向本地

127.0.0.1  admin.xxxx.cn

⑵部署开发本地Nginx服务，配置Nginx文件

server{
    listen  80;
    server_name  admin.xxxx.cn;
    location /admin {
        #代理至开发编辑器调试页面  
        proxy_pass http://127.0.0.1:9091;
    }
    location / {
        #转发域名头
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        #支持Scoket
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_read_timeout 120s;
        #代理至远程接口代理Nginx服务IP
        proxy_pass http://1.1.1.1;
    }
}




一、Vue项目使用/一级目录：

1、vue代码层

server {
    listen 80;
    server_name _;

    # Static root
    root /usr/share/nginx/html;
    index index.html;

    # Gzip for text assets
    gzip on;
    gzip_comp_level 6;
    gzip_min_length 1024;
    gzip_types text/plain text/css application/javascript application/json application/xml image/svg+xml;

    # Serve assets with cache headers
    location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|svg|ico|woff2?)$ {
        expires 7d;
        add_header Cache-Control "public, max-age=604800, immutable";
        try_files $uri =404;
    }

    # Vue SPA fallback
    location / {
        try_files $uri $uri/ /index.html;
    }
}

2、Nginx Proxy代理层


upstream 52aiops_backend {
    server 192.168.254.104:5000;
    keepalive 32;
}
upstream 52aiops_frontend {
    server 192.168.254.104:8080;
    keepalive 32;
}
map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen 80;
    server_name dev.52aiops.cn;

    client_max_body_size 20m;

    client_header_buffer_size 64k;
    large_client_header_buffers 16 128k;
    proxy_buffer_size 64k;
    proxy_buffers 16 128k;
    proxy_busy_buffers_size 256k;

    # 前端（清空 Cookie，避免巨大 Cookie 影响静态与首页）
    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 关键：剥离 Cookie
        proxy_set_header Cookie "";

        gzip on;
        gzip_types text/plain text/css application/javascript application/json application/xml image/svg+xml;

        proxy_http_version 1.1;
        proxy_read_timeout 60s;

        proxy_pass http://52aiops_frontend;
    }

    # 后端 API（如需会话，可保留 Cookie）
    location /api/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;

        proxy_http_version 1.1;
        proxy_read_timeout 120s;

        proxy_pass http://52aiops_backend;
    }
}