CN116149760B - Front-end project packaging method and device based on Vue frame - Google Patents
Front-end project packaging method and device based on Vue frame Download PDFInfo
- Publication number
- CN116149760B CN116149760B CN202310430113.4A CN202310430113A CN116149760B CN 116149760 B CN116149760 B CN 116149760B CN 202310430113 A CN202310430113 A CN 202310430113A CN 116149760 B CN116149760 B CN 116149760B
- Authority
- CN
- China
- Prior art keywords
- project
- content
- environment
- compiling
- configuration file
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
The application relates to a front-end project packaging method and device based on a Vue frame, wherein project operation environments and project contents are configured in compiling commands of the Vue project, after compiling configuration commands are obtained, the compiling configuration commands are analyzed in blocks to obtain environment fields and content fields, and the environment fields and the content fields are respectively assigned in project configuration files to obtain environment configuration files and content configuration files. And finally, mounting the content configuration file in the project initialization file, and compiling and packaging to obtain a front-end project package file. Based on the method, in the application scene of multi-environment and multi-content change, the change operation of compiling and packaging is reduced, the appointed project running environment and project content can be changed through one command, the compiling and packaging efficiency is improved, and meanwhile, the workload of developers and maintainers is effectively reduced.
Description
Technical Field
The application relates to the technical field of front-end development, in particular to a front-end project packaging method and device based on a Vue framework.
Background
Vue is a JavaScript framework for building user interfaces based on standard HTML (hypertext markup language), CSS (cascading style sheets), and JavaScript, and provides a set of declarative, componentized programming models that help developers develop user interfaces efficiently. At present, the front-end technology Vue.js develops rapidly, and a front-end developer also changes the view from a previous structure node, changes the view into changed data to directly drive the view to update, and does not pay attention to the structure node to realize, so that the working efficiency is greatly improved. Meanwhile, a group of various component plug-ins which depend on a Vue technical constructor or learn the Vue technical ideas also develop.
The display of web pages of a website is one of main application scenes of the Vue frame technology. The webpage rendering is generally divided into client rendering and server rendering, wherein the client rendering refers to that the browser starts to generate the webpage after receiving data, and the server rendering refers to that the webpage is rendered on the server and is transmitted to the browser for display. The Vue framework is generally preset with various configurations required for webpage rendering. Therefore, for the content of the webpage presentation, the developer needs to compile and package according to the Vue framework. The logic flow of the conventional Vue compilation packaging technology is generally: compiling a command; compiling environment parameters transmitted by commands; and step three, the project changes the request domain name field according to the environment parameters. In the third step, the change of the project is limited to the change of the project running environment, and the content of the page in the project is not changed.
However, in the actual web page display requirement of the website, there are different item contents, and each item content has its corresponding test environment, pre-production environment and production environment. Because the conventional Vue compiling and packing technology cannot change project contents, the compiling and packing requirements are increased by multiple times under the conditions of a multi-project running environment and the multi-project contents, and a large data processing burden is caused for a compiling and packing developer and a subsequent maintainer, and the compiling and packing efficiency is also influenced.
Disclosure of Invention
Based on the above, it is necessary to provide a front-end project packaging method and device based on a Vue framework for the problem that the compiling and packaging requirements increase in multiple under the scenes of a multi-project running environment and multi-project content.
At least one embodiment of the present disclosure provides a front-end item packing method based on a Vue frame, including the steps of:
configuring project operation environment and project content in a compiling command of the Vue project to obtain a compiling configuration command;
the method comprises the steps of analyzing and compiling configuration commands in a blocking mode to obtain environment fields and content fields; wherein the environment field corresponds to the project operation environment, and the content field corresponds to the project content;
respectively assigning an environment field and a content field in the project configuration file to obtain an environment configuration file and a content configuration file; wherein the environment field corresponds to the project configuration file, and the content field corresponds to the content configuration file;
and mounting the content configuration file in the project initialization file, and compiling and packaging to obtain a front-end project package file.
According to the front-end project packaging method based on the Vue framework, the project running environment and the project content are configured in the compiling command of the Vue project, after the compiling configuration command is obtained, the compiling configuration command is analyzed in a blocking mode to obtain the environment field and the content field, and the environment field and the content field are respectively assigned in the project configuration file to obtain the environment configuration file and the content configuration file. And finally, mounting the content configuration file in the project initialization file, and compiling and packaging to obtain a front-end project package file. Based on the method, in the application scene of multi-environment and multi-content change, the change operation of compiling and packaging is reduced, the appointed project running environment and project content can be changed through one command, the compiling and packaging efficiency is improved, and meanwhile, the workload of developers and maintainers is effectively reduced.
In one embodiment, a process for configuring a project execution environment and project content in a compiling command of a Vue project includes the steps of:
and configuring the format of the compiling command by a user, and configuring the project running environment and the project content according to the compiling command after the user is configured.
In one embodiment, the process of resolving a compile configuration command in blocks includes the steps of:
and carrying out matching separation on the compiling configuration command through grammar corresponding to the Vue item.
In one embodiment, the process of assigning an environment field and a content field in an item profile to obtain the environment profile and the content profile includes the steps of:
matching the environment field to an globally available environment variable in the project configuration file to obtain an environment configuration file;
and placing the content field in a customizable project environment variable in the project configuration file to obtain the content configuration file.
In one embodiment, the content profile is constructed from plug-ins to the Vue item.
In one embodiment, the method further comprises the steps of:
and deploying the front-end project package file to a server for access.
In one embodiment, the item content includes a language.
At least one embodiment of the present disclosure further provides a front-end item packing apparatus based on a Vue frame, including:
the command compiling module is used for configuring a project running environment and project contents in a compiling command of the Vue project to obtain a compiling configuration command;
the command analysis module is used for analyzing the compiling configuration command in a blocking manner to obtain an environment field and a content field; wherein the environment field corresponds to the project operation environment, and the content field corresponds to the project content;
the field configuration module is used for respectively assigning an environment field and a content field in the project configuration file to obtain an environment configuration file and a content configuration file; wherein the environment field corresponds to the project configuration file, and the content field corresponds to the content configuration file;
and the file packaging module is used for mounting the content configuration file in the project initialization file, compiling and packaging to obtain a front-end project package file.
According to the front-end project packaging device based on the Vue framework, the project running environment and the project content are configured in the compiling command of the Vue project, after the compiling configuration command is obtained, the compiling configuration command is analyzed in a blocking mode to obtain the environment field and the content field, and the environment field and the content field are respectively assigned in the project configuration file to obtain the environment configuration file and the content configuration file. And finally, mounting the content configuration file in the project initialization file, and compiling and packaging to obtain a front-end project package file. Based on the method, in the application scene of multi-environment and multi-content change, the change operation of compiling and packaging is reduced, the appointed project running environment and project content can be changed through one command, the compiling and packaging efficiency is improved, and meanwhile, the workload of developers and maintainers is effectively reduced.
The present disclosure also provides, in at least one embodiment, a front-end item packing apparatus including:
one or more memories non-transitory storing computer-executable instructions;
one or more processors configured to execute computer-executable instructions, wherein the computer-executable instructions, when executed by the one or more processors, implement a Vue framework-based front-end project packaging method in accordance with any embodiment of the present disclosure.
The data prediction device configures the project running environment and the project content in the compiling command of the Vue project, analyzes the compiling configuration command in a blocking manner after obtaining the compiling configuration command, obtains the environment field and the content field, and respectively assigns the environment field and the content field in the project configuration file to obtain the environment configuration file and the content configuration file. And finally, mounting the content configuration file in the project initialization file, and compiling and packaging to obtain a front-end project package file. Based on the method, in the application scene of multi-environment and multi-content change, the change operation of compiling and packaging is reduced, the appointed project running environment and project content can be changed through one command, the compiling and packaging efficiency is improved, and meanwhile, the workload of developers and maintainers is effectively reduced.
At least one embodiment of the present disclosure also provides a non-transitory computer-readable storage medium storing computer-executable instructions that, when executed by a processor, implement a Vue framework-based front-end project packaging method according to any embodiment of the present disclosure.
The above-mentioned non-transitory computer-readable storage medium configures the project execution environment and the project content in the compiling command of the Vue project, after obtaining the compiling configuration command, parses the compiling configuration command in blocks to obtain the environment field and the content field, and assigns the environment field and the content field in the project configuration file respectively to obtain the environment configuration file and the content configuration file. And finally, mounting the content configuration file in the project initialization file, and compiling and packaging to obtain a front-end project package file. Based on the method, in the application scene of multi-environment and multi-content change, the change operation of compiling and packaging is reduced, the appointed project running environment and project content can be changed through one command, the compiling and packaging efficiency is improved, and meanwhile, the workload of developers and maintainers is effectively reduced.
Drawings
FIG. 1 is a flow diagram of a method for packaging front-end items based on a Vue framework, according to an embodiment;
FIG. 2 is a flow chart of another embodiment of a method for packaging front-end items based on a Vue framework;
FIG. 3 is a flowchart of a method for packaging front-end items based on a Vue framework according to a specific embodiment;
FIG. 4 is a block diagram of a front end project packaging apparatus based on a Vue framework according to an embodiment;
FIG. 5 is a schematic block diagram of a front-end project bagging apparatus provided in accordance with at least one embodiment of the present disclosure;
fig. 6 is a schematic diagram of a non-transitory computer-readable storage medium provided by at least one embodiment of the present disclosure.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present disclosure more apparent, the technical solutions of the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present disclosure. It will be apparent that the described embodiments are some, but not all, of the embodiments of the present disclosure. All other embodiments, which can be made by one of ordinary skill in the art without the need for inventive faculty, are within the scope of the present disclosure, based on the described embodiments of the present disclosure.
Unless defined otherwise, technical or scientific terms used in this disclosure should be given the ordinary meaning as understood by one of ordinary skill in the art to which this disclosure belongs. The terms "first," "second," and the like, as used in this disclosure, do not denote any order, quantity, or importance, but rather are used to distinguish one element from another. The word "comprising" or "comprises", and the like, means that elements or items preceding the word are included in the element or item listed after the word and equivalents thereof, but does not exclude other elements or items. The terms "connected" or "connected," and the like, are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. "upper", "lower", "left", "right", etc. are used merely to indicate relative positional relationships, which may also be changed when the absolute position of the object to be described is changed.
In order to keep the following description of the embodiments of the present disclosure clear and concise, the present disclosure omits a detailed description of some known functions and known components.
At least one embodiment of the present disclosure provides a front-end project packaging method based on a Vue framework. Fig. 1 is a flowchart of a front-end project packaging method based on a Vue frame according to an embodiment, as shown in fig. 1, and the front-end project packaging method based on a Vue frame according to an embodiment includes steps S100 to S103:
s100, configuring project running environments and project contents in compiling commands of the Vue project to obtain compiling configuration commands;
s101, analyzing and compiling configuration commands in a blocking mode to obtain environment fields and content fields; wherein the environment field corresponds to the project operation environment, and the content field corresponds to the project content;
s102, respectively assigning an environment field and a content field in a project configuration file to obtain the environment configuration file and the content configuration file; wherein the environment field corresponds to the project configuration file, and the content field corresponds to the content configuration file;
s103, mounting the content configuration file in the project initialization file, and compiling and packaging to obtain a front-end project package file.
Wherein the Vue project generally refers to an integral project of a front-end project packaging process, and the project is indicated by a command, such as project starting, packaging and other operations. Wherein the compiling command of the Vue project framework is only configured with the start and package commands.
In one embodiment, a Nuxt generic application framework is selected as the execution basis for the Vue item. Nuxt.js is a general application framework based on Vue.js, and various configurations required by the application rendered by the server are preset, so that the subsequent front-end project package file can be conveniently displayed and constructed in a server rendering mode. The compiling and packaging technology is generally a packaging tool based on weback, and the next is embedded with the packaging tool based on weback, so that subsequent compiling and packaging can be realized.
In the embodiments of the present disclosure, in order to better explain the implementation procedure, the content of the item is explained by taking a language as an example. Meanwhile, in the practical application test, the specific selection of each embodiment, such as the selection of a Nuxt universal application framework, has stable collocation effect with the language, and is a better implementation mode. The project content is language, namely the application scene is multi-project operation environment and multi-language, for example, the method is suitable for website display construction of different countries, and browser display of different languages is carried out according to the language (language) difference among the countries. In order to better compare the traditional compilation packaging, the following general ideas of the traditional compilation packaging are developed for the compilation packaging differences of the multi-project running environment, so that the compilation packaging can be compared with the compilation packaging of the embodiment of the present disclosure:
traditional compiling and packaging ideas: the Vue loads the corresponding.env-based file (environment configuration) according to the start command. The start command configures the demo, and then reads an env.demo file, wherein the file is a template remark environment field NODE_ENV=xx;
when the content of the project is language, generally, when the project runs, a multi-language/internationalization plug-in of Vue-i18n is used to mount the program into the Vue, all language js files (all key attributes of js files are the same and corresponding values are different) are preloaded by the Vue-i18n plug-in, language fields needing to be displayed are selected to be transmitted, the language js files are matched through the language fields, the corresponding values are filled in through the js files by the Vue instance, and the updated language is seen by webpage refreshing.
It should be noted that the sources of the acquired data corresponding to the different item operation environments are different, so that the item content includes conditions such as item series, and the language is one of the item series and does not represent the only limitation.
Based on this, the Vue item may be a nuxt item or a Vue item in step S100.
In one embodiment, to overcome the limitation of the conventional compiling command, fig. 2 is a flowchart of another embodiment of a front-end project packaging method based on a Vue framework, as shown in fig. 2, a process of configuring a project running environment and a project content in the compiling command of a Vue project in step S100 includes step S200:
s200, configuring the format of the compiling command in a self-defined mode, and configuring the project running environment and the project content according to the compiling command after self-defined configuration.
Taking the project running environment as the environment and the project content as the language as an example, the format of the compiling command is configured as' operation: 'plus' environment: 'language', and write BASE = environment in command: 'language', thereby communicating to the project. By custom configuration, preparation is made for subsequent project compilation.
As a preferred implementation mode, the item running environment and the item content are configured in a package. Json compiling command of the nuxt/Vue item, and a compiling configuration command is obtained.
As a preferred embodiment, for nuxt items, the attribute htmlAttrs of the nuxt-based configuration file (html is a hypertext markup language, attr is an attribute, htmlAttrs can be regarded as a hypertext markup language attribute object), a language field can be set in the attribute htmlAttrs, the language field can be directly assigned, and then the language file can be received.
As a preferred implementation mode, the script language parser node. Js is matched with the Vue project for practical use, can use a command interaction mode to execute js code debugging, project starting, packaging and other operations, and can be used for pointing a compiling command to a project configuration file, so that the execution of the step S101 is facilitated.
After the project configuration file acquires the compiling configuration command, the compiling configuration command is analyzed in a blocking mode, and the environment field and the content field are obtained.
In one embodiment, as shown in fig. 2, the process of resolving the compile configuration command in the block in step S101 includes step S201:
s201, matching and separating the compiling configuration command through grammar corresponding to the Vue item.
The grammar corresponding to the Vue item comprises JavaScript grammar. Taking the project running environment as the environment and the project content as the language as an example, the project configuration file obtains a compiling configuration command process. And carrying out matching separation on the ' plus ' language ' through JavaScript grammar to obtain two fields of environment and language.
The compiling configuration command process.env.BASE is customized in the compiling command, can only be transmitted to the project configuration file, and cannot be used for the project globally. Where process is a globally accessible variable in the presence node. env is an environmental information module of the process, and BASE is a custom field. In step 100, BASE has written "environment: language ", this BASE needs to be read by process.
Among them, js is abbreviated as JavaScript, and there are various methods for separating fields by js, such as' operation: environment: language' this compiled command, the semicolon can be converted into comma, then the environment and language can be obtained by taking the designated position. On the other hand, an entire command can be regarded as a reference value, and the command can be matched with the corresponding environment and language field as soon as the command comes in.
As a preferred embodiment, the setting base=environment may be omitted: the step of ' plus ' language ' is to directly acquire command operation and then to separate.
To further reduce the BASE amount, a process.env.npm_config_argv.original command may be used for execution. Wherein, process is an item Process; the env contains the running environment information of the item, npm _config_argv can acquire the parameters input by the editing and packaging command, and original can acquire the command input by the command line.
Further, in step S102, an environment field and a content field are respectively assigned in the project profile, and the environment profile and the content profile are obtained. Wherein the flow ends once the context field is assigned.
In one embodiment, as shown in fig. 2, the process of assigning an environment field and a content field in the project profile in step S102 to obtain the environment profile and the content profile includes step S202 and step S203:
s202, matching the environment field to an globally available environment variable in a project configuration file to obtain the environment configuration file;
s203, placing the content field in a customizable project environment variable in the project configuration file to obtain the content configuration file.
Taking the project running environment as the environment and the project content as the language as an example, the environment field is matched with the corresponding environment variable process. Where process.env.node_env is a globally available environment variable specified by the Vue item. After the environment field is configured to the environment variable, the environment variable of the Vue item is fixed, and the multi-environment configuration is ended.
Similarly, the language field is placed in the process.env.VUE_APP_LANG field, preparing an item initialization i18n file that is passed to the Vue-i18n component. The process_env_app_is a customizable project environment variable of Vue, and is a custom field, and if the field is set to be language, the process_env_app_lang is globally available.
The project configuration file contains the basic configuration of the whole project, has the path of setting compiling and packing, and also has the module classification processing after compiling the page file. Wherein, the path for setting the compiling and packing is rewritable. Meanwhile, because the compiling and packaging command is self-defined, the environment and the language need to be separated in the project configuration file.
In one embodiment, the project configuration file is an i18n.js file created by the Vue-i18n plug-in from the content field, comprising the steps of: initializing and assigning a Vue-i18n plug-in to a variable; the Vue-i18n plug-in passes in two parameters: firstly, preloading all language files, and secondly, compiling acquired content fields of the items; the variable is set to a state that other files can access.
The variable is set to be in a state that other files can access, and the other files are required to be introduced into the files corresponding to the variable. The externally exposed variable represents a corresponding file, and the setting in the file can be accessed through the variable, so that the subsequent mounting operation is facilitated.
Taking the content field as a language field as an example, because the Vue-i18n plug-in sets a field display method, the display method obtains the language field and matches the language field to a corresponding language file according to the language, and the matching is custom matching, for example:
{
en:enjson
}
the en field is set and enjson represents an en.json file.
In JavaScript, the value corresponds to a key value pair, en is a key attribute, enjson is a value corresponding to the key attribute, and the two are corresponding relations. When the en field is passed, an en.json file may be obtained.
The method for displaying the Vue-i18n plug-in can accommodate a plurality of key value pair correspondence relations, for example:
{
en:enjson，
zh:zhjson，
it:itjson
}
according to the key value pair matching relationship, when the en field is transferred, the file of the enjson can be obtained, and when the zh field is transferred, the zhjson file can be obtained.
Therefore, according to the display method, the webpage text can be converted into key attributes which can be resolved by the Vue-i18n plug-in, for example:
based on the zh field of the command transfer, the corresponding zhjson file can be matched. The zhjson file is the configuration relation of key value pairs:
{
' text1': you Mild '
}，
Similarly, the corresponding enjson file may be matched according to the en field of the command transfer. Also in the enjson file is the configuration relationship of key value pairs:
the configuration of the enjson file is as follows
{
‘text1’:”hello”
}，
As can be seen from the zhjson file and the enjson file, the same text1 is a key attribute, and the latter values are correspondingly different according to the files.
After the content configuration file is completed, it is mounted in the project initialization file. Taking the content field as a language field as an example, an i18n.js file built based on a Vue-i18n plugin is hung on the Vue instance. The i18n.js file introduces the configuration related to the Vue-i18n plug-in, and the custom processing of the received language field, the matching configuration of the language field and the language file are arranged inside. Other files introduce an i18n.js file, and variables exposed in the i18n.js file can represent the whole i18n.js file. When a variable is mounted on an instance of Vue, it can be accessed by the entire item by means of Vue.
Taking a project running environment as an environment and project contents as a language as an example, the process of compiling and packaging to obtain a front-end project package file is as follows:
inputting a compiling and packing command: npm run' operation: 'plus' environment: the ' ++ ' language ' (npm denotes the installation package manager, belonging to nodejs, run denotes the launch item for subsequent compilation commands).
Wherein the packaging object for compiling and packaging is the whole project. The items are a stack of files in the code editing software, and default compilation commands typically have a launch item and a package item. When a project is started locally, the effect of project presentation cannot be observed through external links, and the method is only suitable for development and debugging of developers; when packing items, the whole item is generally packed into a folder, and the folder contains js files of pictures, index. Html and various page logical association relations as a complete front-end item package file.
In one embodiment, as shown in fig. 2, the method further includes step S204:
s204, deploying the front-end project package file to a server for access.
The packaged front-end project package folder is put on a server to run, so that a visitor can access the project through a domain name. Taking the project running environment as the environment and the project content as the language as an example, an index. Html file is an accessed entry file, for example, when clicking a place in index. Html to jump to another page, js file contains the logical relationship of pages such as monitoring of clicking operation and jump after monitoring. Wherein, compiling the packaging command self-defines the environment and language, and configures what language the project should be in what project operation environment when packaging through the previous steps.
Based on this, it can be seen that, after the front-end project package file obtained by the front-end project package method based on the Vue framework in any embodiment is deployed, corresponding project contents can be selected according to different project running environments, so that the change operation of compiling and packaging is reduced, and the project running environments and the project contents can be specified by one command. Especially in practical application, the selection of each specific implementation mode in the front-end project packaging method based on the Vue frame in any embodiment of the invention is matched with the scene that the project content is language, the effect is better in the front-end page requirement of multiple languages, for example, the editing packaging command configuration of A, B series products is carried out on the project, when the command containing A is transmitted, only relevant pages covered by the series A are packaged, the command B is transmitted, the relevant pages covered by the series B are packaged and deployed to respective servers, and the two are independent, but the code parts are the same. The front-end project packaging finished according to the method effectively improves the working efficiency.
In order to better explain the implementation of the embodiments of the present application in terms of the content of the item, a specific application example is explained below. Fig. 3 is a flowchart of a front-end project packaging method based on a Vue frame according to a specific application example, as shown in fig. 3, the project motion environment is a test environment, the project content is english, and the method includes steps S1-S6:
S1：build:test:en；
s2: js syntax separates test, en fields;
s3: the test field assigns a value to the project environment en field stream to a language analysis file;
s4: the en field of the language analysis file is matched with the corresponding language file;
s5: compiling and packing are successful, and a front-end project package file is obtained;
s6: the front-end project package file is deployed on a server, and the display language of the corresponding access page is English
According to the front-end project packaging method based on the Vue framework, project operation environments and project contents are configured in compiling commands of the Vue projects, after compiling configuration commands are obtained, the compiling configuration commands are analyzed in a blocking mode to obtain environment fields and content fields, and the environment fields and the content fields are respectively assigned in project configuration files to obtain environment configuration files and content configuration files. And finally, mounting the content configuration file in the project initialization file, and compiling and packaging to obtain a front-end project package file. Based on the method, in the application scene of multi-environment and multi-content change, the change operation of compiling and packaging is reduced, the appointed project running environment and project content can be changed through one command, the compiling and packaging efficiency is improved, and meanwhile, the workload of developers and maintainers is effectively reduced.
At least one embodiment of the present disclosure provides a front-end item packing device based on a Vue frame, and fig. 4 is a block diagram of a front-end item packing device based on a Vue frame according to an embodiment, as shown in fig. 4, and the front-end item packing device based on a Vue frame according to an embodiment includes:
a command compiling module 100, configured to configure a project running environment and project content in a compiling command of a Vue project, and obtain a compiling configuration command;
the command parsing module 101 is configured to parse the compiling configuration command in blocks to obtain an environment field and a content field; wherein the environment field corresponds to the project operation environment, and the content field corresponds to the project content;
a field configuration module 102, configured to assign an environment field and a content field in the project configuration file, respectively, to obtain an environment configuration file and a content configuration file; wherein the environment field corresponds to the project configuration file, and the content field corresponds to the content configuration file;
the file packaging module 103 is configured to mount the content configuration file in the project initialization file, and compile and package the content configuration file to obtain a front-end project package file.
The front-end project packaging device based on the Vue frame in any embodiment configures a project running environment and project contents in a compiling command of the Vue project, analyzes the compiling configuration command in a blocking manner after obtaining the compiling configuration command to obtain an environment field and a content field, and assigns the environment field and the content field in a project configuration file respectively to obtain an environment configuration file and a content configuration file. And finally, mounting the content configuration file in the project initialization file, and compiling and packaging to obtain a front-end project package file. Based on the method, in the application scene of multi-environment and multi-content change, the change operation of compiling and packaging is reduced, the appointed project running environment and project content can be changed through one command, the compiling and packaging efficiency is improved, and meanwhile, the workload of developers and maintainers is effectively reduced.
At least one embodiment of the present disclosure also provides a front-end project packaging apparatus. Fig. 5 is a schematic block diagram of a front-end project bagging apparatus provided in accordance with at least one embodiment of the present disclosure. For example, as shown in fig. 5, the front-end project packaging apparatus 20 may include one or more memories 200 and one or more processors 201. Memory 200 is used to non-transitory store computer-executable instructions; the processor 201 is configured to execute computer-executable instructions that, when executed by the processor 201, may cause the processor 201 to perform one or more steps in a Vue frame-based front end item packaging method in accordance with any embodiment of the present disclosure.
For specific implementation of each step of the front-end project packaging method based on the Vue frame and related explanation content, reference may be made to related content in the embodiment of the front-end project packaging method based on the Vue frame, which is not described herein. It should be noted that the components of the front end project bagging apparatus 20 shown in FIG. 5 are exemplary only and not limiting, and that the front end project bagging apparatus 20 may have other components as desired for practical applications.
In one embodiment, the processor 201 and the memory 200 may communicate with each other directly or indirectly. For example, the processor 201 and the memory 200 may communicate over a network connection. The network may include a wireless network, a wired network, and/or any combination of wireless and wired networks, the disclosure is not limited in type and function of the network herein. For another example, processor 201 and memory 200 may also communicate via a bus connection. The bus may be a peripheral component interconnect standard (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. For example, the processor 201 and the memory 200 may be disposed at a remote data server (cloud) or a distributed energy system (local), or may be disposed at a client (e.g., a mobile device such as a mobile phone). For example, the processor 201 may be a Central Processing Unit (CPU), tensor Processor (TPU), or graphics processor GPU, among other devices having data processing and/or instruction execution capabilities, and may control other components in the data prediction apparatus 20 to perform desired functions. The Central Processing Unit (CPU) can be an X86 or ARM architecture, etc.
In one embodiment, memory 200 may comprise any combination of one or more computer program products, which may include various forms of computer-readable storage media, such as volatile memory and/or non-volatile memory. Volatile memory can include, for example, random Access Memory (RAM) and/or cache memory (cache) and the like. The non-volatile memory may include, for example, read-only memory (ROM), hard disk, erasable programmable read-only memory (EPROM), portable compact disc read-only memory (CD-ROM), USB memory, flash memory, and the like. One or more computer-executable instructions may be stored on the computer-readable storage medium and the processor 201 may execute the computer-executable instructions to implement the various functions of the data prediction device 20. Various applications and various data, as well as various data used and/or generated by the applications, etc., may also be stored in the memory 200.
It should be noted that, the data prediction apparatus 20 may achieve similar technical effects as the front-end project packaging method based on the Vue frame, and the repetition is omitted.
At least one embodiment of the present disclosure also provides a non-transitory computer-readable storage medium. Fig. 6 is a schematic diagram of a non-transitory computer-readable storage medium provided by at least one embodiment of the present disclosure. For example, as shown in FIG. 6, one or more computer-executable instructions 301 may be non-transitory stored on the non-transitory computer-readable storage medium 30. For example, the computer-executable instructions 301, when executed by a computer, may cause the computer to perform one or more steps in a Vue framework-based front-end project packaging method in accordance with any of the embodiments of the present disclosure.
In one embodiment, the non-transitory computer readable storage medium 30 may be used in the data prediction device 20 described above, for example, it may be the memory 200 in the front-end project packaging device 20.
In one embodiment, the description of the non-transitory computer readable storage medium 30 may refer to the description of the memory 200 in the embodiment of the front-end project packaging apparatus 20, and the repetition is omitted.
For the purposes of this disclosure, the following points are also noted:
(1) The drawings of the embodiments of the present disclosure relate only to the structures to which the embodiments of the present disclosure relate, and reference may be made to the general design for other structures.
(2) In the drawings for describing embodiments of the present invention, thicknesses and dimensions of layers or structures are exaggerated for clarity. It will be understood that when an element such as a layer, film, region or substrate is referred to as being "on" or "under" another element, it can be "directly on" or "under" the other element or intervening elements may be present.
(3) The embodiments of the present disclosure and features in the embodiments may be combined with each other to arrive at a new embodiment without conflict. The above is only a specific embodiment of the present disclosure, but the protection scope of the present disclosure is not limited thereto, and the protection scope of the present disclosure should be subject to the protection scope of the claims
The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the description.
The foregoing examples represent only a few embodiments of the present application, which are described in more detail and are not thereby to be construed as limiting the scope of the claims. It should be noted that it would be apparent to those skilled in the art that various modifications and improvements could be made without departing from the spirit of the present application, which would be within the scope of the present application. Accordingly, the scope of protection of the present application is to be determined by the claims appended hereto.
Claims (9)
1. A front-end project packaging method based on a Vue framework is characterized by comprising the following steps:
configuring project operation environment and project content in a compiling command of the Vue project to obtain a compiling configuration command;
analyzing the compiling configuration command by blocks to obtain an environment field and a content field; wherein the environment field corresponds to the project operation environment, and the content field corresponds to the project content;
assigning the environment field and the content field in the project configuration file respectively to obtain an environment configuration file and a content configuration file; wherein the environment field corresponds to the project configuration file, and the content field corresponds to the content configuration file;
the process of respectively assigning the environment field and the content field in the project configuration file to obtain the environment configuration file and the content configuration file comprises the following steps:
matching the environment field to a globally available environment variable in a project configuration file to obtain an environment configuration file;
placing the content field in a customizable project environment variable in a project configuration file to obtain a content configuration file;
and mounting the content configuration file in the project initialization file, and compiling and packaging to obtain a front-end project package file.
2. The front-end project packaging method based on the Vue framework according to claim 1, wherein the process of configuring the project execution environment and the project content in the compiling command of the Vue project comprises the steps of:
and configuring the format of the compiling command by a user, and configuring the project running environment and the project content according to the compiling command after the user is configured.
3. The front-end project packaging method based on the Vue framework according to claim 1, wherein the process of parsing the compiling configuration command by the partition includes the steps of:
and matching and separating the compiling configuration command through grammar corresponding to the Vue item.
4. The Vue frame-based front end project packaging method of claim 1, wherein the content configuration file is constructed from plug-ins to the Vue project.
5. The Vue frame-based front end project packaging method of claim 1, further comprising the steps of:
and deploying the front-end project package file to a server for access.
6. The Vue frame-based front-end project packaging method of any one of claims 1-5, wherein the project content comprises language.
7. Front-end item packing apparatus based on Vue frame, characterized by comprising:
the command compiling module is used for configuring a project running environment and project contents in a compiling command of the Vue project to obtain a compiling configuration command;
the command analysis module is used for analyzing the compiling configuration command in a blocking manner to obtain an environment field and a content field; wherein the environment field corresponds to the project operation environment, and the content field corresponds to the project content;
the field configuration module is used for respectively assigning the environment field and the content field in the project configuration file to obtain an environment configuration file and a content configuration file; wherein the environment field corresponds to the project configuration file, and the content field corresponds to the content configuration file;
the process of respectively assigning the environment field and the content field in the project configuration file to obtain the environment configuration file and the content configuration file comprises the following steps:
matching the environment field to a globally available environment variable in a project configuration file to obtain an environment configuration file;
placing the content field in a customizable project environment variable in a project configuration file to obtain a content configuration file;
and the file packaging module is used for mounting the content configuration file in the project initialization file, compiling and packaging the content configuration file to obtain a front-end project package file.
8. A front-end item packing apparatus comprising:
one or more memories non-transitory storing computer-executable instructions;
one or more processors configured to execute the computer-executable instructions, wherein the computer-executable instructions, when executed by the one or more processors, implement the Vue framework-based front end project packaging method of any one of claims 1 to 6.
9. A non-transitory computer readable storage medium storing computer executable instructions which when executed by a processor implement the Vue framework based front end project packaging method of any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310430113.4A CN116149760B (en) | 2023-04-21 | 2023-04-21 | Front-end project packaging method and device based on Vue frame |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310430113.4A CN116149760B (en) | 2023-04-21 | 2023-04-21 | Front-end project packaging method and device based on Vue frame |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116149760A CN116149760A (en) | 2023-05-23 |
| CN116149760B true CN116149760B (en) | 2023-07-14 |
Family
ID=86352836
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310430113.4A Active CN116149760B (en) | 2023-04-21 | 2023-04-21 | Front-end project packaging method and device based on Vue frame |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116149760B (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107179907A (en) * | 2017-05-15 | 2017-09-19 | 北京奇艺世纪科技有限公司 | One kind configuration system and method |
| CN111046311A (en) * | 2019-12-17 | 2020-04-21 | 深圳前海环融联易信息科技服务有限公司 | Method and device for realizing traceless iteration version of PC (personal computer) end, computer equipment and storage medium |
| CN114995807A (en) * | 2022-05-26 | 2022-09-02 | 厦门立林科技有限公司 | Configuration method and system of front-end multi-project framework |
| CN115016785A (en) * | 2022-08-09 | 2022-09-06 | 杭州湛联科技有限公司 | Front-end item packaging method and device for multi-environment sharing |
| CN115098186A (en) * | 2022-06-20 | 2022-09-23 | 中国平安财产保险股份有限公司 | Project processing method and device, computer equipment and storage medium |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9043765B2 (en) * | 2011-11-09 | 2015-05-26 | Microsoft Technology Licensing, Llc | Simultaneously targeting multiple homogeneous and heterogeneous runtime environments |
| US9442744B2 (en) * | 2012-02-23 | 2016-09-13 | Microsoft Technology Licensing, Llc | Multilingual build integration for compiled applications |
| CN106569869B (en) * | 2016-11-14 | 2019-04-19 | 平安科技（深圳）有限公司 | Plug-in unit packaging method and device |
| CN111142928A (en) * | 2019-12-05 | 2020-05-12 | 福建天泉教育科技有限公司 | Method and terminal for automatically constructing front-end project |
| CN114610318A (en) * | 2022-03-18 | 2022-06-10 | 平安国际智慧城市科技股份有限公司 | Android application packaging method, device, equipment and storage medium |
| CN116069325B (en) * | 2023-01-28 | 2023-08-04 | 深圳市明源云采购科技有限公司 | Front-end project construction method, device, equipment and computer readable storage medium |
-
2023
- 2023-04-21 CN CN202310430113.4A patent/CN116149760B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107179907A (en) * | 2017-05-15 | 2017-09-19 | 北京奇艺世纪科技有限公司 | One kind configuration system and method |
| CN111046311A (en) * | 2019-12-17 | 2020-04-21 | 深圳前海环融联易信息科技服务有限公司 | Method and device for realizing traceless iteration version of PC (personal computer) end, computer equipment and storage medium |
| CN114995807A (en) * | 2022-05-26 | 2022-09-02 | 厦门立林科技有限公司 | Configuration method and system of front-end multi-project framework |
| CN115098186A (en) * | 2022-06-20 | 2022-09-23 | 中国平安财产保险股份有限公司 | Project processing method and device, computer equipment and storage medium |
| CN115016785A (en) * | 2022-08-09 | 2022-09-06 | 杭州湛联科技有限公司 | Front-end item packaging method and device for multi-environment sharing |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116149760A (en) | 2023-05-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109976761B (en) | Software development kit generation method and device and terminal equipment | |
| WO2018082562A1 (en) | Method and device for compiling page data and rendering page, and storage medium | |
| US9086931B2 (en) | System for translating diverse programming languages | |
| CN112416339A (en) | Page development method and device and computer equipment | |
| US20150242194A1 (en) | System for Translating Diverse Programming Languages | |
| CN111680253B (en) | Page application data packet generation method and device, computer equipment and storage medium | |
| CN112905179A (en) | Mobile terminal H5 page generation method and device, electronic equipment and storage medium | |
| CN113064593B (en) | Method and device for dynamic mobile APP, computer equipment and storage medium | |
| CN113918195A (en) | Application interface updating method and device, electronic equipment and readable storage medium | |
| CN111831384A (en) | Language switching method and device, equipment and storage medium | |
| KR101552914B1 (en) | Web server application framework web application processing method using the framework and computer readable medium processing the method | |
| CN112818176B (en) | Data processing method, device, equipment and storage medium | |
| CN110727429A (en) | Front-end page generation method, device and equipment | |
| CN116149760B (en) | Front-end project packaging method and device based on Vue frame | |
| US11281477B2 (en) | Assigning computing resources to execution of evaluators for image animation | |
| CN115390846A (en) | Compiling construction method and device, electronic equipment and storage medium | |
| CN111831277B (en) | Virtual data generation method, system, device and computer readable storage medium | |
| CN114254232A (en) | Cloud product page generation method and device, computer equipment and storage medium | |
| CN109542447B (en) | OTX program file execution method and device | |
| Bui | Web components: concept and implementation | |
| WO2024056100A1 (en) | Page rendering method and apparatus, device, storage medium, and computer program product | |
| RU2799988C2 (en) | System and method for dynamic visualization of software elements | |
| US11977878B2 (en) | System and method for managing software services in building customized software | |
| Himschoot et al. | Introduction to WebAssembly and Blazor | |
| KC | Developing and Implementing Web Components |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |