Nginx - 同一域名配置多个 Vue 项目(支持Webpack、Uniapp)

本文涉及的产品
.cn 域名,1个 12个月
简介: Nginx - 同一域名配置多个 Vue 项目(支持Webpack、Uniapp)

一、Vue + Webpack 项目配置

1、目录结构图

这里有三个项目,我们接下来分别看下三个项目是如何配置。

image.png

2、Nginx Conf 配置

server {
listenxxx; #端口server_namexxx.xxx.xxx.xxx; #地址root/usr/web;
location/ {
root/usr/web/index;
indexindex.html;
try_files$uri$uri//index.html;
 }
location/wxgj {
indexindex.html;
try_files$uri$uri//wxgj/index.html;
 }
location/parent {
indexindex.html;
try_files$uri$uri//parent/index.html;
 }
location/xxx { #后台服务器proxy_passxxxxx;
 }
}

3、Vue项目 router index.js 配置

image.png

4、Vue项目 config index.js 配置

image.png

Ps1:3、4 两图中,parent 项目同理 wxgj 项目。

Ps2:assetsPublicPath 只有发行的时候才生效。

二、Uniapp 项目配置

"h5" : {
// "publicPath": "/parent/", // 目前没发现有什么用,可以去掉"devServer" : {
"port" : 1111,
"historyApiFallback" : true,
"host" : "0.0.0.0",
"disableHostCheck" : true    },
"router" : {
"mode" : "history"// "base" : "parent" // 发行时开始,否则 Dev 模式注释掉,因为有 Bug    },
}

1、root 的处理结果是:root 路径+location 路径。

2、location 的处理结果:

1)root 的处理结果。

2)浏览器地址匹配。

3)与 try_files 匹配。

3、“location / ” 通用匹配,任何未匹配到其它location的请求都会匹配到,相当于switch中的default。

目录
相关文章
|
8天前
|
应用服务中间件 BI nginx
Nginx的location配置详解
【10月更文挑战第16天】Nginx的location配置详解
|
13天前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
102 2
|
15天前
|
缓存 负载均衡 安全
Nginx常用基本配置总结:从入门到实战的全方位指南
Nginx常用基本配置总结:从入门到实战的全方位指南
185 0
|
3天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
2天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
21 4
|
5天前
|
缓存 负载均衡 应用服务中间件
Nginx配置
【10月更文挑战第22天】在实际配置 Nginx 时,需要根据具体的需求和环境进行调整和优化。同时,还需要注意配置文件的语法正确性和安全性。
23 7
|
5天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
7天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
15 7
|
2天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
7天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
16 6