一种基于脚本的制造技术

本发明专利技术公开了一种基于脚本的

【技术实现步骤摘要】
一种基于脚本的Web应用程序构建方法与终端


[0001]本专利技术涉及
web
应用程序开发
，特别涉及一种基于脚本的
Web
应用程序构建方法与终端
。

技术介绍

[0002]在传统的基于
Vue.js
的
web
应用程序开发中，通常使用单工程模式，即一个项目对应一个应用
。
然而，对于复杂的应用场景或大型的
Web
平台，可能需要通过一套工程代码生成多套不同的页面代码部署到不同的平台或者提供给不同的用户进行使用，这些页面代码存在大量相同的部分，而这些页面代码中存在的差异，由部署的平台和使用的用户进行决定
。
使用传统的单工程模式进行开发，需要创建多个项目工程，项目的可维护性和开发效率存在挑战
。
[0003]基于
Vue.js
的
web
应用程序的页面内容，主要取决于项目中的路由映射文件与路由映射文件中使用到的路由组件
。
目前已知的一种技术方案，便是利用这一特性实现一个项目构建多个
web
应用程序
。
具体的实现，是利用了路由映射文件中，路由实例对象的
meta
属性
。
路由实例对象的
meta
属性，可以存储一些自定义的信息
。
通过在这个
meta
属性中存储一个控制是否参与构建的属性，控制是否加载对应的路由组件
(
将路由组件纳入构建范围
)
，当然这里需要通过自定义的组件加载导入方式才能够实现
。
这样在同一个项目中，在路由映射文件中，对使用到的路由实例对象的
meta
属性进行不同的配置，便可实现对应不同的
web
应用程序以及构建出不同的
web
应用程序
。
[0004]这种通过给路由实例对象的
meta
属性添加控制路由组件是否参与
web
应用程序构建的方案，能够在针对不同的部署平台与用户呈现差异化页面内容的方案
。
但这套方案上存在一些缺陷：
[0005](1)
这种方案会导致路由映射文件变得复杂与臃肿，特别是针对多用户与多平台的情况，整个路由映射文件就会变得很大，可维护性就会变得很差
。
虽然实现了通过一个项目构建出了多个
web
应用程序的效果，但是在多个应用程序的管理上存在较大的缺陷，每一个
web
应用程序对于一种路由映射文件配置的情况，而这种方式并无法对每一个
web
应用程序的路由映射文件配置进行记录与管理
。
[0006](2)
每次存在不同需求的构建时，需要手动的对路由映射文件中的配置内容进行修改，一旦配置的内容较多就很容易出错
。
[0007](3)
于不同的
web
应用程序，或者说需要提供给不同的用户使用与部署到不同的平台，这其中不仅仅只是路由映射文件配置的差异，还有请求配置的差异，构建结果形式上的差异等
。
只能每遇到一种情况，就相应的对这些配置进行修改，不够灵活也不方便进行管理
。

技术实现思路

[0008]本专利技术所要解决的技术问题是：提供一种基于脚本的
Web
应用程序构建方法与终
端，能够更加灵活
、
方便和系统化地实现一个项目中多个
Web
应用程序的构建
。
[0009]为了解决上述技术问题，本专利技术采用的技术方案为：
[0010]一种基于脚本的
Web
应用程序构建方法，包括步骤：
[0011]S1、
运行前置构建脚本，由所述前置构建脚本读取目标项目中的所有路由映射文件，进行列表展示；
[0012]每个所述路由映射文件中配置有一种
Web
应用程序所需的页面文件；
[0013]S2、
获取用户选择的所述路由映射文件的文件路径；
[0014]S3、
启动构建工具对目标项目进行构建，并将所述文件路径配置到构建工具的环境变量中；
[0015]S4、
构建工具根据所述环境变量读取路由映射文件，进行
Web
应用程序的构建
。
[0016]为了解决上述技术问题，本专利技术采用的另一种技术方案为：
[0017]一种基于脚本的
Web
应用程序构建终端，包括处理器
、
存储器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
[0018]S1、
运行前置构建脚本，由所述前置构建脚本读取目标项目中的所有路由映射文件，进行列表展示；
[0019]每个所述路由映射文件中配置有一种
Web
应用程序所需的页面文件；
[0020]S2、
获取用户选择的所述路由映射文件的文件路径；
[0021]S3、
启动构建工具对目标项目进行构建，并将所述文件路径配置到构建工具的环境变量中；
[0022]S4、
构建工具根据所述环境变量读取路由映射文件，进行
Web
应用程序的构建
。
[0023]本专利技术的有益效果在于：本专利技术的一种基于脚本的
Web
应用程序构建方法与终端，利用现代化的前端构建工具的构建流程和构建结果的特性，使用不同的路由映射文件来区分部署的平台或者用户，通过现代化的前端构建工具的动态导入功能，配合自定义的构建前置脚本，实现路由文件的动态导入，而不是像传统的项目中将使用的路由映射文件作为一个静态的不变的值，从而能够实现单工程对
Web
应用程序，在不同部署平台实现部署内容的部分差异化，能够更加灵活
、
方便和系统化地实现一个项目中多个
Web
应用程序的构建
。
附图说明
[0024]图1为本专利技术实施例的一种基于脚本的
Web
应用程序构建方法的流程图；
[0025]图2为本专利技术实施例的一种基于脚本的
Web
应用程序构建方法的具体流程示例图；
[0026]图3为本专利技术实施例的一种基于脚本的
Web
应用程序构建方法中路由映射文件的展示列表示例图；
[0027]图4为传统的基于
Vue.js
的
web
应用程序构建流程示例图；
[0028]图5为传统
vue
项目中
router.js
文件决定了构建结果的具体内容示例图；...

【技术保护点】

【技术特征摘要】
1.
一种基于脚本的
Web
应用程序构建方法，其特征在于，包括步骤：
S1、
运行前置构建脚本，由所述前置构建脚本读取目标项目中的所有路由映射文件，进行列表展示；每个所述路由映射文件中配置有一种
Web
应用程序所需的页面文件；
S2、
获取用户选择的所述路由映射文件的文件路径；
S3、
启动构建工具对目标项目进行构建，并将所述文件路径配置到构建工具的环境变量中；
S4、
构建工具根据所述环境变量读取路由映射文件，进行
Web
应用程序的构建
。2.
根据权利要求1所述的一种基于脚本的
Web
应用程序构建方法，其特征在于，步骤
S2
还包括步骤：将所述文件路径通过记录至环境变量配置文件中；步骤
S3
中将所述文件路径配置到构建工具的环境变量中具体为：将所述环境变量配置文件合并到构建工具中项目的环境变量中
。3.
根据权利要求1所述的一种基于脚本的
Web
应用程序构建方法，其特征在于，步骤
S4
具体为：构建工具根据环境变量中的所述文件路径，动态导入路由映射文件至入口文件或在入口文件所引用的文件中，从而获取相应的页面文件以完成
Web
应用程序的构建
。4.
根据权利要求1所述的一种基于脚本的
Web
应用程序构建方法，其特征在于，步骤
S2
和步骤
S3
之间还包括步骤：
S21、
由所述前置构建脚本读取目标项目中的所有请求配置文件
、
所有国际化配置文件和所有构建配置文件；
S22、
分步分别对所有所述请求配置文件
、
所有所述国际化配置文件以及所有配置构建文件以列表形式向用户展示，并获取用户选择的所述请求配置文件
、
所述国际化配置文件和所述配置构建文件的文件路径；步骤
S3
中将所述文件路径配置到构建工具的环境变量中具体为：将用户选择的所述路由映射文件
、
所述请求配置文件
、
所述国际化配置文件和所述构建配置文件的文件路径配置到构建工具的环境变量中
。5.
根据权利要求4所述的一种基于脚本的
Web
应用程序构建方法，其特征在于，所述构建配置文件根据用户选择可以存在多个不同层面的构建配置文件；步骤
S4
中还包括步骤：根据环境变量中所述构建配置文件的文件路径，得到多个不同层面的所述构建配置文件，并进行组合得到独立的配置对象，将所述配置对象合并至构建工具的构建配置中
。6.
一种基于脚本的
Web
应用程序构...

【专利技术属性】
技术研发人员：刘纪越，欧新木，付春启，陈德全，方小英，阮思怡，
申请(专利权)人：福州富昌维控电子科技有限公司，
类型：发明
国别省市：