Static mapping method, system and equipment during compiling of Vue project skin module
By generating static JavaScript files during the compilation phase, the dependencies of skin modules in Vue.js projects are clearly defined, solving the problem that Webpack cannot accurately resolve module dependencies, thus achieving precise bundling and improved loading speed.
Patent Information
- Application Number
- CN202511678654.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-11-17
- Publication Date
- 2026-02-10
AI Technical Summary
In existing technologies, the use of dynamic loading in skin module management in Vue.js projects causes Webpack to fail to accurately resolve module dependencies, resulting in excessively large bundled files that affect loading speed and user experience.
During the compilation phase, the skin folder is scanned using a file system operation plugin to generate static JavaScript files, clarify module dependencies, achieve precise packaging, and avoid packaging all modules.
Reduces package size, shortens loading time, optimizes the build process, and improves user experience. Suitable for various Vue projects and build tools.
Smart Images
Figure CN121501290A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of front-end build optimization technology, and specifically discloses a compile-time static mapping method, system and device for skin modules in Vue projects. Background Technology
[0002] In Vue.js project development, skin management is a crucial feature for enhancing user experience, allowing users to personalize their interface style through skin switching. Currently, the industry commonly uses dynamic loading to manage skin modules. The core technology leverages the require.context API provided by the Webpack build tool in conjunction with regular expressions to dynamically retrieve all Vue format skin files from the skin folder at application runtime and complete the module import and rendering.
[0003] The `require.context` API operates on a dynamic binding model, and its module path parameters typically contain variables or regular expressions. This makes it difficult for Webpack to accurately parse a clear module dependency graph during static code analysis during the compilation phase. Because Webpack's bundling strategy faces uncertain module dependencies, it adopts a conservative approach to ensure no missing modules occur at runtime, including all modules with matching file extensions in the `require.context` target directory in the final bundle file. This bundling method directly leads to a significant increase in the size of the final generated JS file, increasing server storage and transmission pressure, and prolonging the browser's download, parsing, and execution time for JS files. Consequently, it slows down the application's initial page load speed, negatively impacting the user experience.
[0004] To alleviate the aforementioned problems, existing technologies have proposed optimization schemes such as code splitting and lazy loading. Code splitting involves dividing the bundle file into multiple smaller chunk files to achieve parallel loading; lazy loading only loads modules when the user needs to use a specific skin module. However, neither of these schemes fundamentally solves the core defect of compile-time module dependency uncertainty. They can only alleviate the negative impact of excessively large file sizes to a certain extent and cannot completely prevent the problem of unused skin modules being packaged. Summary of the Invention
[0005] To address the problems in existing technologies, this invention provides a compile-time static mapping method, system, and device for skin modules in Vue projects. This technical solution clarifies skin module dependencies during the compilation phase, enabling precise packaging. It addresses issues such as excessively large package size and low loading efficiency caused by runtime dynamic loading of skin files in existing technologies, achieving the goal of clarifying module dependencies at compile time and optimizing the packaging process.
[0006] To achieve the above objectives, the present invention provides the following technical solution:
[0007] In one aspect, this invention proposes a compile-time static mapping method for skin modules in Vue projects, applied to project environments integrating front-end build tools. The method includes:
[0008] After the Vue project starts the compilation process, the pre-configured file system operation plugin scans the specified skin folder in the project, traverses all files with the .vue extension in the skin folder, and determines the set of skin files to be processed;
[0009] Extract the file path information of each skin file from the skin file set, process the file path information based on preset rules to obtain the file identifier corresponding to each file, and construct the mapping relationship data between the file identifier and the file name. Each mapping relationship data contains a unique file identifier and the corresponding file name.
[0010] Based on the mapping relationship data, a preset file content template is called, the mapping relationship data is populated into the template, a static JavaScript file containing the mapping object is generated, and it is output to the specified directory of the project.
[0011] In the business logic of a Vue project, the static JavaScript file is referenced using an import statement, and the relevant information of the target skin file is obtained by accessing the mapping object in the file.
[0012] Optionally, the step of processing file path information based on preset rules to obtain the file identifier corresponding to each file includes: obtaining the relative path of the skin component file relative to the project root directory, applying a hash function to the relative path string, extracting a part or all of the hash result as the basis of the unique file identifier, and optionally adding a fixed prefix string to form a unique file identifier.
[0013] Optionally, the preset rules include: the file identifier is generated using a hash algorithm based on the relative path of the Vue file;
[0014] The hash algorithm includes any one of the following: MD5 algorithm, SHA1 algorithm, and SHA256 algorithm, to ensure that each Vue file corresponds to a unique file identifier.
[0015] Optionally, the mapping data between the built file identifier and the file name includes:
[0016] Receive the list containing all skin component file paths; for each file path in the list, parse the file name from the file path;
[0017] A built-in identifier generation algorithm is applied to the file path to calculate a unique file identifier;
[0018] Create a mapping entry using the file identifier as the key and the file's base name as the value.
[0019] Optionally, the preset file content template includes: comment information, skinMap mapping object definition, and module export statement;
[0020] The module export statement is compatible with CommonJS module system, ES6 module system and browser global variable access method.
[0021] Optionally, generating a static JavaScript file includes: constructing a key-value pair by using a unique file identifier as the key and the extracted basic filename as the value; aggregating the key-value pairs generated from all skin component files to form a JavaScript object structure containing skin mapping relationship data;
[0022] The JavaScript object structure is serialized to generate a string content that conforms to the JavaScript syntax specification; and written to a static JavaScript file at a specified path; based on the static JavaScript file, a constant object containing the mapping relationship data is exported.
[0023] Optionally, after generating the static JavaScript file, the method further includes: generating a corresponding type definition file based on the JavaScript object structure;
[0024] Export a type interface with the same name as the constant object through the type definition file; the type interface is used to define the type of all keys and their corresponding values of the constant object.
[0025] Optionally, the method further includes: receiving the path of the skin folder as a monitoring target;
[0026] During the operation of the development server, continuously monitor file system events under the target path, including file creation, deletion, and content modification;
[0027] When an event related to a skin component file is detected, a signal is triggered and transmitted to the scanning module, processing module, and file generation module, instructing them to re-execute their respective functions, thereby achieving automatic updates to the static JavaScript file and continuous monitoring of the skin folder path; when an event related to the skin folder is detected, and the event involves a skin component file with a preset file extension, the static JavaScript file is automatically updated.
[0028] In another aspect of the present invention, a compile-time static mapping system for skin modules in Vue projects is proposed for implementing the method described in any one of the first aspects, comprising:
[0029] The scanning module is used to scan the specified skin folder in the project after the Vue project starts the compilation process. It uses a pre-configured file system operation plugin to traverse all files with the .vue extension in the skin folder and determine the set of skin files to be processed.
[0030] The processing module is used to extract the file name and file path information of each skin file in the skin file set, process the file path information based on preset rules to obtain the file identifier corresponding to each file, construct the mapping relationship data between the file identifier and the file name, each mapping relationship data contains a unique file identifier and the corresponding file name, and transmit the mapping relationship data to the generation module;
[0031] The generation module is connected to the processing module. It receives the mapping relationship data transmitted by the processing module, calls the preset file content template, fills the mapping relationship data into the template, generates a static JavaScript file containing the mapping objects, and outputs it to the specified directory of the project.
[0032] The integration module, connected to the generation module, is used to reference the static JavaScript file in the business code of a Vue project via an import statement, and to obtain relevant information about the target skin file by accessing the mapping object in the file.
[0033] A third aspect of the present invention provides an electronic device including a memory and a processor, wherein the memory stores a computer program that, when executed by the processor, causes the processor to perform the steps of the method as described in any one of the first aspects.
[0034] The present invention has the following beneficial effects:
[0035] This invention proposes a compile-time static mapping method, system, and device for skin modules in Vue projects. It aims to solve the problem in existing technologies where skin files are dynamically loaded at runtime using `require.context`, which prevents Webpack from performing tree-shaking optimization, resulting in excessively large bundled JS files. This invention completes the scanning of skin files, the construction of mapping relationships, and the generation of static files during the compilation phase. This allows build tools like Webpack to clearly define the dependencies of skin modules at compile time, effectively triggering the tree-shaking optimization mechanism. Only the skin modules actually used in the project are bundled into the final bundle file, avoiding the problem of bundling all modules.
[0036] The static JavaScript files generated by this invention have a simple structure and are easy to reference. They do not require dynamic path resolution and module lookup at runtime, thus reducing runtime computational redundancy. The entire solution is integrated into the existing build process as a plugin, without requiring significant modifications to the original business logic of the project. It has low integration costs, strong compatibility, and is suitable for different versions of Vue projects such as Vue 2.x and Vue 3.x, as well as various front-end build tools such as Webpack and Vite. Attached Figure Description
[0037] Other features, objects, and advantages of this application will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings:
[0038] Figure 1 This is a flowchart of a compile-time static mapping method for skin modules in Vue projects proposed in this invention;
[0039] Figure 2 This is a schematic diagram illustrating the interaction between the characterization scanning module, processing module, generation module, and integration module in the system of this embodiment of the invention;
[0040] Figure 3 This is a schematic diagram of the module structure of a compile-time static mapping system for a skin module in a Vue project proposed in this invention.
[0041] Figure 4 This is a schematic diagram of the structure of an electronic device used to implement the methods and system embodiments of this application. Detailed Implementation
[0042] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.
[0043] Example 1: As Figure 1 As shown, the first embodiment of this invention proposes a compile-time static mapping method for skin modules in Vue projects, particularly relating to a compilation processing method and apparatus for skin modules in web projects based on the Vue.js framework. This method is suitable for Vue project development scenarios requiring flexible management of skin components and pursuing optimized build performance. It can be widely applied to the implementation of skin switching functions in various web applications, including but not limited to enterprise management systems, mobile web applications, and desktop web applications. The method is applied in a project environment integrating front-end build tools and specifically includes the following steps:
[0044] Step S101: After the Vue project starts the compilation process, the pre-configured file system operation plugin scans the specified skin folder in the project, traverses all files with the extension .vue in the skin folder, and determines the set of skin files to be processed;
[0045] Step S102: Extract the file path information of each skin file from the skin file set, process the file path information based on preset rules to obtain the file identifier corresponding to each file, and construct the mapping relationship data between the file identifier and the file name. Each mapping relationship data contains a unique file identifier and the corresponding file name.
[0046] Step S103: Based on the mapping relationship data, call the preset file content template, fill the template with the mapping relationship data, generate a static JavaScript file containing the mapping object, and output it to the specified directory of the project;
[0047] Step S104: In the business code of the Vue project, reference the static JavaScript file through an import statement, and obtain relevant information about the target skin file by accessing the mapping object in the file.
[0048] In step S101 above, the file system operation plugin is a Webpack custom plugin or a Vite custom plugin. The file system operation plugin is integrated into the Vue project's build process and automatically executes the operations from step S101 to step S103 when the compilation process starts.
[0049] In step S102 above, processing file path information based on preset rules to obtain the file identifier corresponding to each file includes: obtaining the relative path of the skin component file relative to the project root directory, applying a hash function to the relative path string, extracting part or all of the hash result as the basis of the unique file identifier, and optionally adding a fixed prefix string, for example, the length of the fixed prefix string is in the range of 6-16 characters, to form a unique file identifier.
[0050] Optionally, the preset rules include: the file identifier is generated using a hash algorithm based on the relative path of the Vue file;
[0051] The hash algorithm includes any one of the following: MD5 algorithm, SHA1 algorithm, and SHA256 algorithm, to ensure that each Vue file corresponds to a unique file identifier.
[0052] In step S102 above, the mapping relationship data between the constructed file identifier and the file name includes:
[0053] Receive the list containing all skin component file paths; for each file path in the list, parse the file name from the file path;
[0054] A built-in identifier generation algorithm is applied to the file path to calculate a unique file identifier;
[0055] Create a mapping entry using the file identifier as the key and the file's base name as the value.
[0056] In step S103 above, the preset file content template includes: comment information, skinMap mapping object definition, and module export statement;
[0057] The module export statement is compatible with CommonJS module system, ES6 module system and browser global variable access method.
[0058] In step S103 above, generating a static JavaScript file includes: using a unique file identifier as the key and the extracted basic file name as the value to construct a key-value pair; aggregating the key-value pairs generated from all skin component files to form a JavaScript object structure containing skin mapping relationship data;
[0059] The JavaScript object structure is serialized to generate a string content that conforms to the JavaScript syntax specification; and written to a static JavaScript file at a specified path; based on the static JavaScript file, a constant object containing the mapping relationship data is exported.
[0060] After generating the static JavaScript file in step S101 above, the method further includes: generating a corresponding type definition file based on the JavaScript object structure;
[0061] Export a type interface with the same name as the constant object through the type definition file; the type interface is used to define the type of all keys and their corresponding values of the constant object.
[0062] In addition, the above method also includes: receiving the path of the skin folder as the monitoring target;
[0063] During the operation of the development server, continuously monitor file system events under the target path, including file creation, deletion, and content modification;
[0064] When an event related to a skin component file is detected, a signal is triggered and transmitted to the scanning module, processing module, and file generation module, instructing them to re-execute their respective functions, thereby achieving automatic updates to the static JavaScript file and continuous monitoring of the skin folder path; when an event related to the skin folder is detected, and the event involves a skin component file with a preset file extension, the static JavaScript file is automatically updated.
[0065] In step S104 above, the static JavaScript file is referenced in the project's business code by importing it using the import statement or the require statement. The file name of the target skin file is obtained by traversing the key-value pairs of the skinMap mapping object, and then the target skin component is loaded on demand using the dynamic import statement.
[0066] Although the steps in the above embodiments are described in the above order, those skilled in the art will understand that in order to achieve the effect of this embodiment, different steps do not need to be executed in such an order. They can be executed simultaneously (in parallel) or in a reverse order. These simple variations are all within the protection scope of this invention.
[0067] To further illustrate the overall process of the method in Embodiment 1 above, Embodiment 2 is proposed as follows: Implementation of a Vue 2.x project based on the Webpack build tool, specifically including:
[0068] Implementation Environment Requirements: The method in Embodiment 2 of this invention can be implemented in a front-end development environment with a Node.js runtime environment. It supports different versions of Vue projects such as Vue 2.x and Vue 3.x, and is compatible with mainstream front-end build tools such as Webpack 4.x and above, and Vite 2.x and above. The following embodiments provide detailed explanations using Vue 2.7.16 with Webpack 4.47.0 and Vue 3.2.45 with Vite 2.9.15 as examples. Other versions of the Vue framework and build tools can be implemented with reference to this method.
[0069] 1.1 Project Structure Preparation
[0070] Create a standard Vue 2.x project structure, and create a dedicated skin folder (named "skin" by default) in the project root directory to store various skin component files. The specific project structure is as follows:
[0071] Each .vue file in the skin folder is an independent skin component, containing the style definition and structure template of the corresponding skin; webpack.config.js is the core configuration file of Webpack, used to integrate custom plugins; skin-map-plugin.js is a custom Webpack plugin file that implements the core logic of this invention.
[0072] 1.2 Implementation of a Custom Webpack Plugin
[0073] A custom Webpack plugin, SkinMapPlugin, is created. This plugin serves as the core carrier for implementing the method of this invention. It embeds the Webpack compilation process through hook functions to complete skin file scanning, mapping relationship construction, and static file generation.
[0074] 1.3 Webpack Configuration Integration
[0075] Import and configure the custom plugin mentioned above in the Webpack configuration file webpack.config.js to integrate the plugin into the Webpack build process.
[0076] 1.4 Referencing static mapping files in project business code
[0077] In the business components of a Vue project, by importing a static JavaScript file (skinMap.js), the skin map object within it is used to obtain skin file information, enabling on-demand loading of skin components, replacing the traditional require.context dynamic loading method.
[0078] Example 3: Implementation of a Vue 3.x project based on the Vite build tool
[0079] 2.1 Project Structure Preparation
[0080] Create a standard Vue 3.x project structure (initialize using Vue CLI or Vite), and create a skin folder in the project root directory to store skin components.
[0081] 2.2 Implementation of a Custom Vite Plugin
[0082] Since Vite's build process differs from Webpack's, a custom plugin needs to be implemented for Vite's plugin mechanism to complete the scanning, mapping, building, and static file generation of skin files.
[0083] 2.3 Vite Configuration Integration
[0084] Import and configure the custom Vite plugin in vite.config.js.
[0085] 2.4 Implementation of Business Code Reference
[0086] In Vue 3.x components, reference static mapping files to implement skin switching functionality.
[0087] Example 4: Testing, Verification, and Result Analysis
[0088] To verify the technical effect of the present invention, an enterprise-level Vue single-page application project was selected as the test object. The project contains 15 independent skin component files, and the method of the present invention and the existing technology (dynamic loading with require.context) were compared and tested respectively.
[0089] 3.1 Test Environment Configuration
[0090] Operating System: Windows 10 Professional
[0091] Node.js version: 16.18.0
[0092] Vue version: 2.7.16
[0093] Build tool: Webpack 4.47.0
[0094] Testing tools: webpack-bundle-analyzer (bundle size analysis tool), Chrome DevTools (load time statistics)
[0095] Network environment: Simulated 3G network (downlink speed 1Mbps, latency 100ms)
[0096] 3.2 Comparison Scheme
[0097] Existing technology: Dynamically loading skin components using require.context;
[0098] Embodiment of the present invention: The compile-time static mapping method of the present invention is adopted, namely the scheme in Embodiment 2.
[0099] 3.3 Test Results
[0100] The bundle size was analyzed using webpack-bundle-analyzer, and the first-screen load time was measured using Chrome DevTools. The test results are shown in Table 1:
[0101] Table 1
[0102]
[0103] 3.4 Results Analysis
[0104] Test results show that the method of the present invention has significant optimizations in terms of package size, loading time, and memory usage compared with the prior art.
[0105] The final bundle size was reduced by approximately 43.75%, and the skin-related code size was reduced by approximately 89.57%. This is because the present invention implements explicit module dependencies at compile time, enabling Webpack to effectively perform tree-shaking optimization and only bundle the skin modules actually used.
[0106] The initial screen loading time was reduced by approximately 38.64%, thanks to the reduction in the size of the JS file, which significantly shortened the browser's download and parsing time.
[0107] The development server memory usage was reduced by approximately 30.95%, optimizing resource consumption during the build process and improving the development experience for large projects.
[0108] Example 5: Based on the above technical concept, the fifth embodiment of the present invention proposes a virtual system corresponding to the method of the first embodiment, namely, a compile-time static mapping system for the skin module of a Vue project. The following is in conjunction with... Figure 3 The fifth embodiment of the present invention will be described in detail.
[0109] like Figure 2 and 3 The aforementioned compile-time static mapping system for a Vue project skin module, wherein each module of the system works collaboratively according to the method described in Embodiment 1, includes:
[0110] The scanning module 210 is used to scan the specified skin folder in the project after the Vue project starts the compilation process, through a pre-configured file system operation plugin, traverse all files with the extension .vue in the skin folder, and determine the set of skin files to be processed.
[0111] Processing module 220 is used to extract the file path information of each skin file in the skin file set, process the file path information based on preset rules, obtain the file identifier corresponding to each file, construct the mapping relationship data between the file identifier and the file name, each mapping relationship data contains a unique file identifier and the corresponding file name, and transmit the mapping relationship data to the generation module;
[0112] The generation module 230 is connected to the processing module. It receives the mapping relationship data transmitted by the processing module, calls the preset file content template, fills the mapping relationship data into the template, generates a static JavaScript file containing the mapping object, and outputs it to the specified directory of the project.
[0113] The integration module 240, connected to the generation module, is used to reference the static JavaScript file in the business code of the Vue project through an import statement, and to obtain relevant information about the target skin file by accessing the mapping object in the file.
[0114] Example 6: This embodiment of the invention also provides an electronic device corresponding to Examples 1 and 2.
[0115] The electronic device includes a memory and a processor. The memory stores a computer program. When the computer program is executed by the processor, the processor performs the steps of the compile-time static mapping method for a Vue project skin module as described in any one of S101-S104.
[0116] like Figure 4 As shown, the electronic device may include: at least one processor 31, at least one network interface 35, user interface 34, memory 36, and at least one communication bus 32.
[0117] The communication bus 32 is used to enable communication between these components.
[0118] The user interface 34 may include a display screen and a camera. Optionally, the user interface 34 may also include a standard wired interface and a wireless interface.
[0119] The network interface 35 may optionally include a standard wired interface or a wireless interface (such as a WIFI interface).
[0120] The processor 31 may include one or more processing cores. The processor 31 connects to various parts of the server using various interfaces and lines, and performs various server functions and processes data by running or executing instructions, programs, code sets, or instruction sets stored in the memory 36, and by calling data stored in the memory 36. Optionally, the processor 31 may be implemented using at least one hardware form of Digital Signal Processing (DSP), Field-Programmable Gate Array (FPGA), or Programmable Logic Array (PLA). The processor 31 may integrate one or a combination of several of the following: Central Processing Unit (CPU), Graphics Processing Unit (GPU), and modem. The CPU primarily handles the operating system, user interface, and applications; the GPU is responsible for rendering and drawing the content required for display; and the modem handles wireless communication. It is understood that the modem may also not be integrated into the processor 31 and may be implemented as a separate chip.
[0121] The memory 36 may include random access memory (RAM) or read-only memory. Optionally, the memory 36 may include a non-transitory computer-readable storage medium. The memory 36 can be used to store instructions, programs, code, code sets, or instruction sets. The memory 36 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as touch function, sound playback function, image playback function, etc.), instructions for implementing the above-described method embodiments, etc.; the data storage area may store data involved in the above-described method embodiments, etc. Optionally, the memory 36 may also be at least one storage device located remotely from the aforementioned processor 31. Figure 4 As shown, the memory 36, which serves as a computer storage medium, may include an operating system, a network communication module, a user interface module, and a compile-time static mapping method, system, and device application for a Vue project skin module.
[0122] exist Figure 4In the electronic device shown, the user interface 34 is mainly used to provide an input interface for the user and obtain the user input data; while the processor 31 can be used to call the application stored in the memory 36 for a compile-time static mapping method of a Vue project skin module. When executed by one or more processors 31, the electronic device performs one or more of the methods described in steps S101-S104 of the above embodiment.
[0123] Those skilled in the art will clearly understand that the technical solutions of this application can be implemented using software and / or hardware. In this specification, "unit" and "module" refer to software and / or hardware capable of independently performing or cooperating with other components to perform specific functions. Hardware may include, for example, a Field-Programmable Gate Array (FPGA), an Integrated Circuit (IC), etc.
[0124] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention, and they should all be covered within the scope of the claims and specification of the present invention.
Claims
1. A compile-time static mapping method for skin modules in Vue projects, applied in project environments integrating front-end build tools, characterized in that... The method includes: After the Vue project starts the compilation process, the pre-configured file system operation plugin scans the specified skin folder in the project, traverses all files with the .vue extension in the skin folder, and determines the set of skin files to be processed; Extract the file path information of each skin file from the skin file set, process the file path information based on preset rules to obtain the file identifier corresponding to each file, and construct the mapping relationship data between the file identifier and the file name. Each mapping relationship data contains a unique file identifier and the corresponding file name. Based on the mapping relationship data, a preset file content template is called, the mapping relationship data is populated into the template, a static JavaScript file containing the mapping object is generated, and it is output to the specified directory of the project. In the business logic of a Vue project, the static JavaScript file is referenced using an import statement, and the relevant information of the target skin file is obtained by accessing the mapping object in the file.
2. The method according to claim 1, characterized in that, The step of processing file path information based on preset rules to obtain the file identifier corresponding to each file includes: obtaining the relative path of the skin component file relative to the project root directory, applying a hash function to the relative path string, extracting part or all of the hash result as the basis of the unique file identifier, and optionally adding a fixed prefix string to form a unique file identifier.
3. The method according to claim 2, characterized in that, The preset rules include: file identifiers are generated using a hash algorithm based on the relative path of the Vue file; The hash algorithm includes any one of the following: MD5 algorithm, SHA1 algorithm, and SHA256 algorithm, to ensure that each Vue file corresponds to a unique file identifier.
4. The method according to claim 2, characterized in that, The mapping relationship data between the constructed file identifier and the file name includes: Receive the list containing all skin component file paths; for each file path in the list, parse the file name from the file path; A built-in identifier generation algorithm is applied to the file path to calculate a unique file identifier; Create a mapping entry using the file identifier as the key and the file's base name as the value.
5. The method according to claim 1, characterized in that, The preset file content template includes: comment information, skinMap mapping object definition, and module export statement; The module export statement is compatible with CommonJS module system, ES6 module system and browser global variable access method.
6. The method according to claim 5, characterized in that, The process of generating static JavaScript files includes: constructing a key-value pair by using a unique file identifier as the key and the extracted basic file name as the value; and aggregating the key-value pairs generated from all skin component files to form a JavaScript object structure containing skin mapping relationship data. The JavaScript object structure is serialized to generate a string content that conforms to the JavaScript syntax specification; and written to a static JavaScript file at a specified path; based on the static JavaScript file, a constant object containing the mapping relationship data is exported.
7. The method according to claim 1, characterized in that, After generating the static JavaScript file, the method further includes: generating a corresponding type definition file based on the JavaScript object structure; Export a type interface with the same name as the constant object through the type definition file; the type interface is used to define the type of all keys and their corresponding values of the constant object.
8. The method according to claim 1, characterized in that, The method further includes: receiving the path of the skin folder as a monitoring target; During the operation of the development server, continuously monitor file system events under the target path, including file creation, deletion, and content modification; When an event related to a skin component file is detected, a signal is triggered and transmitted to the scanning module, processing module, and file generation module, instructing them to re-execute their respective functions, thereby achieving automatic updates to the static JavaScript file and continuous monitoring of the skin folder path; when an event related to the skin folder is detected, and the event involves a skin component file with a preset file extension, the static JavaScript file is automatically updated.
9. A compile-time static mapping system for skin modules in a Vue project, characterized in that, To implement the method of any one of claims 1-8, comprising: The scanning module is used to scan the specified skin folder in the project after the Vue project starts the compilation process. It uses a pre-configured file system operation plugin to traverse all files with the .vue extension in the skin folder and determine the set of skin files to be processed. The processing module is used to extract the file path information of each skin file in the skin file set, process the file path information based on preset rules, obtain the file identifier corresponding to each file, construct the mapping relationship data between the file identifier and the file name, each mapping relationship data contains a unique file identifier and the corresponding file name, and transmit the mapping relationship data to the generation module; The generation module is connected to the processing module. It receives the mapping relationship data transmitted by the processing module, calls the preset file content template, fills the mapping relationship data into the template, generates a static JavaScript file containing the mapping objects, and outputs it to the specified directory of the project. The integration module, connected to the generation module, is used to reference the static JavaScript file in the business code of a Vue project via an import statement, and to obtain relevant information about the target skin file by accessing the mapping object in the file.
10. An electronic device, comprising a memory and a processor, characterized in that, The memory stores a computer program that, when executed by the processor, causes the processor to perform the steps of the compile-time static mapping method for the skin module of a Vue project as described in any one of claims 1 to 7.