您的位置 首页 > 数码极客

(多页面应用如何构建)如何使应用不在页面显示!

数据管理平台包含了多个后台项目,后台项目均使用vue作为开发框架。

子项目存在公共头部,需要统一管理维护。

子项目存在公共的依赖(如vue、vuex、vue-router等),公共依赖包可以统一维护。

子项目存在公共存在公共的配置文件例如需要统一维护。

使用thinkjs统一维护每个项目的,并为头部注入用户信息,并且单独构建一个common项目,统一维护第三方依赖。

存在的利弊:

配置繁琐

打包效率高

灵活性好

只需维护一个html文件

common配置介绍,打包主要配置介绍:

web将vendor依赖中的库、文件打包(依赖的库取的是的值)

extract-text-webpack-plugin将css单独提取出来,打包成一个.css文件

assets-webpack-plugin将web打包生成的文件的文件名保存为一个.json文件。方便子项目引用。

optimize-css-assets-webpack-plugin压缩打包后的.css文件

vue-cli3的配置文件被封装在了npm模块@vue/cli-service 中可使用vue inspect > ou进行查看

web将第三方依赖的索引id与对应的第三方依赖具体位置告知webpack

add-asset-html-webpack-plugin将common中生成的bundle-con文件中的依赖文件注入html-webpack-plugin的模板中

如果各自项目的打包依赖分布在各自项目中,依然会增加维护成本以及依赖安装的打包成本。这里就需要理解node查找依赖的逻辑。通过module.paths可以看到node查找依赖时的顺序。

node会从当前目录的node_modules一级一级的向上查找,所以我们只需要将所有依赖安装在common和vue的父级目录即可。

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“多页面应用如何构建,如何使应用不在页面显示,单页面应用如何实现,如何在页面隐藏应用,如何在手机页面隐藏应用,如何固定应用页面”边界阅读