Nginx 支持单域名多 Vue 服务配置备忘

zhichangterry 发布于2019-07-25 14:49 / 2050人阅读

摘要：最近开发时，遇到需要使用同一域名承载多个前端项目的场景，具体需求如下访问新版本前端项目访问后端接口服务访问默认前端项目配置内容注意的配置。此时，可以通过对新版前端文件中的进行配置，以规避这一问题注该方法仅适用于构建的项目参考链接

最近开发时，遇到需要使用同一域名承载多个前端项目的场景，具体需求如下：

/v2 访问新版本前端项目

/api 访问后端 Spring Boot 接口服务

/ 访问默认前端项目

1. Nginx 配置内容

server {
    listen       80;
    listen       [::]:80;
    server_name  _;

    server_name_in_redirect off;
    proxy_set_header Host $host;

    location /api {
        proxy_pass http://0.0.0.0:0000;
    }

    location / {
        index  index.html;
        root /path/to/main/web/app;
    }

    location /v2 {
        index  index.html;
        alias /path/to/v2/web/app;
    }
}

注意 Nginx 的 alias 配置。此时，新前端项目需要被放在 /path/to/v2/web/app 路径下。

2. 修改 publicPath 配置

仅仅通过上述配置，在访问新版前端时，会遇到资源文件无法找到的问题。

此时，可以通过对新版前端 vue.config.js 文件中的 publicPath 进行配置，以规避这一问题（注：该方法仅适用于 Vue-Cli 3.x 构建的项目）：

module.exports = {
    ...
    
    publicPath: "/v2/",
    
    ...
};

参考链接

Understanding the difference between the root and alias directives in Nginx；

Can"t get two single page applications to run together on one server using nginx；

海外云主机 GPU服务器 vue.js多页面单云端服务器多客户端单云服务器多客户端单文档多窗口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40491.html

Nginx基本配置备忘

摘要：基本配置备忘从属于笔者的服务端应用程序入门与实践，更多知识体系参阅我的技术体系结构图。有每个进程的最大连接数，选取哪种事件驱动模型处理连接请求，是否允许同时接受多个网路连接，开启多个网络连接序列化等。配置用户或者组，默认为。 [Nginx基本配置备忘]()从属于笔者的服务端应用程序入门与实践，更多知识体系参阅2016:我的技术体系结构图:Web/ServerSideApplicatio...

scq000 2019-07-25 13:50 评论0 收藏0
单页应用的部署方案

摘要：所以单页应用的部署，需要将所有的页面请求都返回，浏览器下载了后会自动解析并导航到对应页面。总结单页应用与以前的常规多页面应用还是有区别的，开发过程与后端解耦了，同时会出现跨域鉴权以及应用部署的问题。本文同步发布于我的个人博客上 - 单页应用的部署方案本文主要简单讲一下单页应用的开发及部署方法，默认你懂一些服务端知识及nginx知识，如果有任何可以在下方评论留言。单页应用 SPA（...

yanbingyun1990 2019-07-25 14:45 评论0 收藏0
关于Vue/axios下跨域cookie的处理

摘要：凡事有例外，以下分别对待不同情况服务器端配置即可客户端配置，这样大部分浏览器都支持跨域了，反正新版本下无问题。但放在默认设置下依然出现无法获取的问题，至此，查资料查到解决存取的跨域问题，依照文中记载，在追加的响应头，解决了下的问题。一般在生产环境下尽量可以通过nginx等反向代理，把vue前端和api接口处理成同一端口和域名。在开发和测试时，也可以使用兼容性比较好的浏览器进行。凡...

Mike617 2019-07-25 13:54 评论0 收藏0
Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0