首先介绍一下背景:
本次是为企业设计一个应用平台,前端使用vue实现,包含多个前端系统,包含单点登录。后台是基于spring cloud的微服务架构。数据库使用mysql。使用nginx作为前端入口。
首先从前端开始说起:
把系统拆分成多个前端应的目的,主要是因为客户的业务系统较多,且各个业务模块之间,功能相对独立。因此,为了方便开发和后期维护,把前端拆分成了多个系统。另外一个方面,作为一款产品,系统可以按不同模块组合的方式,适应多中不同行业的应用场景。
废话好多啊~~赶紧上干货:
首先需要给每个vue前端项目设置一个前缀,也就是统一路由。
路由配置代码:
export default new Router({
mode: "history", // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes,
base: "/myApp"
});
有了这个配置还不够,需要配置vue打包的路径:
在vue.config.js里加上:
publicPath: process.env.NODE_ENV === "production" ? "/myApp/" : ""
这样vue就可以直接打包了。
下面是nginx的配置:
location /myApp/ {
root html/;
index index.html index.htm;
try_files $uri $uri/ /myApp/index.html;
}
这样就可以把多个vue项目在一个nginx上部署起来了。
后台部分未完待续。。。
版权归原作者 振洋702 所有, 如有侵权,请联系我们删除。