基于Vue框架的前端项目打包方法及装置与流程

本技术涉及前端开发，特别是涉及一种基于vue框架的前端项目打包方法及装置。

背景技术：

1、vue是一款用于构建用户界面的javascript框架，其基于标准html（超文本标记语言）、css（级联样式表）和javascript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。目前，前端技术vue.js发展迅速，前端开发者也由之前的结构节点更改视图，转变为更改数据直接驱动视图更新，不再关注结构节点实现，这大大提高了工作效率。同时，一批依赖于vue技术构造器或学习vue技术思想的各类组件插件也应运而生。

2、网站网页的展示是vue框架技术的主要应用场景之一。其中，网页渲染一般分为客户端渲染和服务端渲染，客户端渲染是指浏览器拿到了数据才开始生成网页，服务端渲染是指在服务器渲染好了页面，传给浏览器进行展示。其中，vue框架一般都预设了网页渲染所需的各种配置。因此，针对网页展示的内容，开发者需要根据vue框架进行编译打包。传统的vue编译打包技术的逻辑流程一般是：步骤一，编译命令；步骤二，编译命令传递的环境参数；步骤三，项目根据环境参数更改请求域名字段。在步骤三中，项目的更改仅限于项目运行环境的更改，并不会对更改项目里页面的内容。

3、但是，在实际的网站网页展示需求中，存在不同的项目内容，而每个项目内容都有其对应的测试环境、预生产环境及生产环境。由于传统的vue编译打包技术无法更改项目内容，在多项目运行环境和多项目内容的场景下，导致编译打包要求成倍数递增，给编译打包的开发者和后续的维护者造成了较大的数据处理负担，也影响了编译打包的效率。

技术实现思路

1、基于此，有必要针对多项目运行环境和多项目内容的场景下编译打包要求成倍数递增的问题，提供一种基于vue框架的前端项目打包方法及装置。

2、本公开至少一个实施例提供一种基于vue框架的前端项目打包方法，包括步骤：

3、在vue项目的编译命令里配置项目运行环境和项目内容，获得编译配置命令；

4、分块解析编译配置命令，获得环境字段和内容字段；其中，环境字段与项目运行环境对应，内容字段与项目内容对应；

5、在项目配置文件中分别指派环境字段和内容字段，获得环境配置文件和内容配置文件；其中，环境字段与项目配置文件对应，内容字段与内容配置文件对应；

6、在项目初始化文件里对内容配置文件进行挂载，并编译打包以获得前端项目包文件。

7、上述的基于vue框架的前端项目打包方法，在vue项目的编译命令里配置项目运行环境和项目内容，获得编译配置命令后，分块解析编译配置命令，获得环境字段和内容字段，并在项目配置文件中分别指派环境字段和内容字段，获得环境配置文件和内容配置文件。最后在项目初始化文件里对内容配置文件进行挂载，并编译打包以获得前端项目包文件。基于此，在多环境以及多内容变更的应用场景中，减少编译打包的更改操作，通过一条命令即可更改指定的项目运行环境和项目内容，提高编译打包效率的同时有效地降低开发者和维护者的工作量。

8、在其中一个实施例中，在vue项目的编译命令里配置项目运行环境和项目内容的过程，包括步骤：

9、自定义配置编译命令的格式，并根据自定义配置后的编译命令配置项目运行环境和项目内容。

10、在其中一个实施例中，分块解析编译配置命令的过程，包括步骤：

11、通过vue项目对应的语法，对编译配置命令进行匹配分离。

12、在其中一个实施例中，在项目配置文件中分别指派环境字段和内容字段，获得环境配置文件和内容配置文件的过程，包括步骤：

13、将环境字段匹配给项目配置文件中全局可用的环境变量，获得环境配置文件；

14、将内容字段放置在项目配置文件中可自定义的项目环境变量中，获得内容配置文件。

15、在其中一个实施例中，内容配置文件由vue项目的插件构造。

16、在其中一个实施例中，还包括步骤：

17、将前端项目包文件部署到服务器上访问。

18、在其中一个实施例中，项目内容包括语言。

19、本公开至少一个实施例还提供一种基于vue框架的前端项目打包装置，包括：

20、命令编译模块，用于在vue项目的编译命令里配置项目运行环境和项目内容，获得编译配置命令；

21、命令解析模块，用于分块解析编译配置命令，获得环境字段和内容字段；其中，环境字段与项目运行环境对应，内容字段与项目内容对应；

22、字段配置模块，用于在项目配置文件中分别指派环境字段和内容字段，获得环境配置文件和内容配置文件；其中，环境字段与项目配置文件对应，内容字段与内容配置文件对应；

23、文件打包模块，用于在项目初始化文件里对内容配置文件进行挂载，并编译打包以获得前端项目包文件。

24、上述的基于vue框架的前端项目打包装置，在vue项目的编译命令里配置项目运行环境和项目内容，获得编译配置命令后，分块解析编译配置命令，获得环境字段和内容字段，并在项目配置文件中分别指派环境字段和内容字段，获得环境配置文件和内容配置文件。最后在项目初始化文件里对内容配置文件进行挂载，并编译打包以获得前端项目包文件。基于此，在多环境以及多内容变更的应用场景中，减少编译打包的更改操作，通过一条命令即可更改指定的项目运行环境和项目内容，提高编译打包效率的同时有效地降低开发者和维护者的工作量。

25、本公开至少一个实施例还提供一种前端项目打包装置，包括：

26、一个或多个存储器，非瞬时性地存储有计算机可执行指令；

27、一个或多个处理器，配置为运行计算机可执行指令，其中，计算机可执行指令被一个或多个处理器运行时实现根据本公开任一实施例的基于vue框架的前端项目打包方法。

28、上述的数据预测装置，在vue项目的编译命令里配置项目运行环境和项目内容，获得编译配置命令后，分块解析编译配置命令，获得环境字段和内容字段，并在项目配置文件中分别指派环境字段和内容字段，获得环境配置文件和内容配置文件。最后在项目初始化文件里对内容配置文件进行挂载，并编译打包以获得前端项目包文件。基于此，在多环境以及多内容变更的应用场景中，减少编译打包的更改操作，通过一条命令即可更改指定的项目运行环境和项目内容，提高编译打包效率的同时有效地降低开发者和维护者的工作量。

29、本公开至少一个实施例还提供一种非瞬时性计算机可读存储介质，其中，非瞬时性计算机可读存储介质存储有计算机可执行指令，计算机可执行指令被处理器执行时实现根据本公开任一实施例的基于vue框架的前端项目打包方法。

30、上述的非瞬时性计算机可读存储介质，在vue项目的编译命令里配置项目运行环境和项目内容，获得编译配置命令后，分块解析编译配置命令，获得环境字段和内容字段，并在项目配置文件中分别指派环境字段和内容字段，获得环境配置文件和内容配置文件。最后在项目初始化文件里对内容配置文件进行挂载，并编译打包以获得前端项目包文件。基于此，在多环境以及多内容变更的应用场景中，减少编译打包的更改操作，通过一条命令即可更改指定的项目运行环境和项目内容，提高编译打包效率的同时有效地降低开发者和维护者的工作量。