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。

目录
相关文章
|
1月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
156 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
21天前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
41 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
7天前
|
JavaScript 应用服务中间件 nginx
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
19 1
|
8天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
22 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
17天前
|
JavaScript 应用服务中间件 开发工具
vue尚品汇商城项目-day07【53.nginx反向代理配置】
vue尚品汇商城项目-day07【53.nginx反向代理配置】
27 4
|
2月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
79 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
Web App开发 JavaScript 小程序
【有问必答】搭建uniapp项目流程手把手教学
本文详细介绍了uniapp项目的搭建流程、组件引入、接口封装及常用配置。作者“狗哥”应博友之邀,分享了其日常开发经验,包括HBuilderX的使用、uview-ui和moment.js的引入与配置、环境变量设置、HTTP请求封装及API接口管理等内容。文章强调理解官方文档的重要性,并提供了具体步骤和示例代码,帮助读者快速掌握uniapp开发技巧。
32 0
【有问必答】搭建uniapp项目流程手把手教学
|
2月前
|
前端开发 JavaScript API
|
2月前
|
JavaScript 测试技术
在不同 webpack 版本的 Vue 项目中配置 Storybook
在不同 webpack 版本的 Vue 项目中配置 Storybook
|
1天前
|
弹性计算 网络协议 安全
如何使用阿里云虚拟主机和域名设置网站?
如何使用阿里云虚拟主机和域名设置网站?