使用NGINX部署多个前端vue应用
首先介绍一下背景：本次是为企业设计一个应用平台，前端使用vue实现，包含多个前端系统，包含单点登录。后台是基于spring cloud的微服务架构。数据库使用mysql。使用nginx作为前端入口。首先从前端开始说起：把系统拆分成多个前端应的目的，主要是因为客户的业务系统较多，且各个业务模块之间，功能相对独立。因此，为了方便开发和后期维护，把前端拆分成了多个系统。另外一个方面，作为一款产品，系统可
·
背景介绍：
本次是为企业设计一个大型应用平台，将平台拆分成多个前端应用。原因是平台各个业务模块之间功能相对独立，为了方便开发和后期维护，所以把前端拆分成了多个系统。
上干货：
1、首先需要给每个vue前端项目设置一个前缀/myApp1。
export default new Router({
mode: "history", // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes,
base: "/myApp1"
});
2、配置vue打包的路径：
在vue.config.js里加上：
publicPath: process.env.NODE_ENV === "production" ? "/myAp/1/" : ""
这样vue就可以直接打包了。
3、配置nginx：
location /myApp1/ {
root html/myApp1的包;
index index.html index.htm;
try_files $uri $uri/ /myApp/index.html;
}
启动nginx，通过在浏览器上访问"本地IP:端口/myApp1"就可以访问应用myApp1的前端页面了。同样的方式可以配置myApp2、myApp3等等~~
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)