Rapid internationalization method, system and device based on Vue2 and storage medium

Abstract

The invention provides a Vue2-based rapid internationalization method, system and device and a storage medium, and relates to the technical field of web application development, and the method comprises the following steps: adding a specific placeholder identifier to an original Chinese display text needing internationalization in a Vue component template; a. Vue file in the project is traversed through a Node.js file read-write module; analyzing the traversed. Vue file by using a template compiler of Vue, and extracting a Chinese display text which is identified and wrapped by a specific placeholder; according to a predefined language configuration file, a multi-language translation template file is generated, and the extracted original Chinese display text serves as a translation key of the translation template file.

Description

Technical Field

[0001] This invention relates to the field of web application development technology, and more specifically, to a rapid internationalization method based on Vue2. Background Technology

[0002] In the internationalization development of Vue2 applications, the mainstream solution is vue-i18n, which is implemented by using placeholders to replace Chinese text in the code; maintaining a separate JSON translation file and achieving multilingual switching through placeholder key-value matching.

[0003] However, in actual development, vue-i18n placeholders are not convenient for viewing the corresponding placeholder language translations. During development, developers need to frequently check the corresponding translation files, and frequently switch between code and translation files, manually establishing a two-layer mapping between Chinese characters, placeholders, and translations. This can easily lead to key-value misalignment and low development efficiency. In addition, existing tools are not optimized for Chinese development habits, requiring domestic developers to switch repeatedly between Chinese and English contexts. Placeholder naming is prone to losing semantic meaning, resulting in poor adaptability for Chinese developers. Summary of the Invention

[0004] The purpose of this invention is to provide a rapid internationalization method, system, device, and storage medium based on Vue2 to solve the problems of low efficiency in multilingual development and insufficient Chinese development adaptation in existing technologies.

[0005] To address the aforementioned issues, this invention first provides a rapid internationalization method based on Vue2, comprising the following steps: adding specific placeholders to the original Chinese display text that needs to be internationalized in the Vue component template; traversing the .vue files in the project using Node.js's file read / write module; parsing the traversed .vue files using Vue's template compiler to extract the Chinese display text wrapped by the specific placeholders; and generating a multilingual translation template file based on a predefined language configuration file, wherein the translation template file uses the extracted original Chinese display text as the translation key.

[0006] Furthermore, the language configuration file contains a list of language codes that the project needs to support and configuration information for the output path of translation template files.

[0007] Furthermore, the translation template file is in JSON format.

[0008] Furthermore, the specific placeholder is identified as an interpolation expression or a custom directive in the Vue template syntax.

[0009] Furthermore, the template compiler for Vue is @vue / compiler-dom.

[0010] Furthermore, it also includes providing the generated translation template file to the internationalization runtime library for loading, enabling multilingual switching functionality.

[0011] This invention also provides a rapid internationalization system based on Vue2, comprising: a placeholder marking module, used to add specific placeholder markers to the original Chinese display text that needs to be internationalized in the Vue component template during the development phase; a file traversal module, used to traverse the .vue component files in the project source code through the Node.js file system module; a text extraction module, used to parse the .vue file using Vue's template compiler and extract the original Chinese display text wrapped by the placeholder markers; and a template generation module, used to generate a multilingual translation template file with the original Chinese display text as the key according to the language configuration file.

[0012] Furthermore, it also includes a runtime support module, which provides translation template files to the internationalization runtime library for loading, enabling multilingual switching functionality.

[0013] The present invention also provides an electronic device, comprising: a processor, and a memory connected to the processor; the memory storing computer execution instructions; the processor executing the computer execution instructions stored in the memory to implement the rapid internationalization method based on Vue2 as described in any of the above technical solutions.

[0014] The present invention also provides a computer-readable storage medium storing computer-executable instructions, which, when executed, are used to implement the rapid internationalization method based on Vue2 as described in any of the above technical solutions.

[0015] According to the present invention, a method, system, device, and storage medium for rapid internationalization based on Vue2 is provided. By adding specific placeholder identifiers before Chinese text, Node.js and @vue / compiler-dom are used to automatically extract text and generate multilingual translation templates. There is no need to manually maintain the mapping relationship between placeholders and translations, reducing context switching during development and significantly improving the efficiency of multilingual development. It is suitable for Vue2 management systems that require rapid expansion of internationalization functions. Detailed Implementation

[0016] To make the above-mentioned objects, features, and advantages of the present invention more apparent and understandable, specific embodiments of the present invention are described in detail below. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

[0017] Example 1

[0018] This embodiment provides a specific implementation method of a fast internationalization method based on Vue2, which is applied to the multilingual development scenario of enterprise-level management systems. This method marks Chinese texts in the Vue component template, traverses files using Node.js, and combines with the Vue template compiler to extract texts, and finally generates a multilingual translation template with the original Chinese text as the key, realizing a fast internationalization process without manual placeholder maintenance.

[0019] This embodiment specifically includes the following steps:

[0020] I. Development stage: Mark Chinese texts that need to be internationalized

[0021] Placeholder addition rule: In the Vue component template, add a specific placeholder identifier to the original Chinese display text that needs to be internationalized. For example, on the login page, mark texts such as "Username" and "Password" as follows:

[0022] <el-input v-model="keyword" clearable class="input-wm-b-s":placeholder="$lc('Search and filter conditions')" / >

[0023] <div class＝"flex-box flex-lr">

[0024] <el-button type="text"@click="al lCheck"> {{

[0025] checklist.length === filterlists.length? $lc('(Unselect all)'): $lc('(Select all)')

[0026] }}

[0027] <el-button type="text"@click="defaultCheck"> {{$lc('(Restore Default)')}}

[0028] Among them, $lc('Chinese content') is a custom placeholder identifier used to distinguish the text to be translated from ordinary code texts. This identifier adopts the interpolation expression form in Vue template syntax to ensure that it can be correctly recognized by the template compiler.

[0029] II. Configuration stage: Define multilingual support rules

[0030] 1. Create a language configuration file

[0031] Create an internationalization configuration file (such as server-config.jsonc) in the project root directory, and the content includes:

[0032] List of supported language codes: such as ['zh-cn', 'en', 'th'], which represent Simplified Chinese, English, and Thai respectively;

[0033] Output path of the translation file: such as'src / locales / ', specifying the storage location of the generated translation template.

[0034] Configuration file example:

[0035]

[0036] 2. Configure the script execution command

[0037] Add the script command to package.json for easy one-click text extraction and translation generation:

[0038] III. Automated Processing Stage: Extracting Text and Generating Translation Templates

[0039] 1. Traverse the Vue files in the project

[0040] Traverse all .vue files in the project using Node.js's file system module (fs). The specific process is as follows:

[0041] Starting from the src directory, check each subdirectory and file one by one;

[0042] Filter out component files with the .vue extension and read their source code.

[0043] 2. Parse the template and extract Chinese text.

[0044] The official Vue template compiler, @vue / compiler-dom, is used to parse the read .vue files.

[0045] The template code is converted into an Abstract Syntax Tree (AST) to identify all node types;

[0046] Traverse the AST nodes and find the text node containing the $1c placeholder identifier;

[0047] Extract the original Chinese text from the placeholders and store it in a text collection.

[0048] 3. Generate multilingual translation templates

[0049] Generate a JSON-formatted translation template file based on the language list in the configuration file:

[0050] Using the extracted Chinese text as the key, create translation fields for each language;

[0051] Generate independent JSON files (such as en.json and th.json) according to the language code and store them in the specified output path.

[0052] Additionally, during the runtime phase, translation templates can be integrated to enable multilingual switching, the steps of which include:

[0053] 1. Load the translation template into the runtime library

[0054] In the Vue project entry file, load the generated translation template using an internationalization runtime library (such as vue-i18n):

[0055] Include the vue-i18n library and translation files;

[0056] Initialize the i18n instance and register multilingual messages.

[0057] 2. Implement language switching functionality

[0058] The system provides a language switching interface, allowing users to dynamically switch languages ​​by modifying the locale property of the i18n instance.

[0059] The method provided in this embodiment can improve development efficiency and simplify translation maintenance; domestic developers do not need to predefine placeholder key names, but can directly write Chinese text and add identifiers, which can reduce context switching time by nearly 50%; translators can directly fill in the translation content in the JSON file with Chinese as the key, without having to look up placeholders in the code, thus reducing the understanding cost.

[0060] Example 2

[0061] This embodiment provides a rapid internationalization system based on Vue2, which can implement the method provided in Embodiment 1, including:

[0062] The placeholder tag module is used to add specific placeholder tags to the original Chinese text that needs to be internationalized in Vue component templates during the development phase;

[0063] The file traversal module is used to traverse .vue component files in the project source code using Node.js's file system module;

[0064] The text extraction module is used to parse .vue files using Vue's template compiler and extract the original Chinese text displayed in placeholders.

[0065] The template generation module is used to generate multilingual translation template files with the original Chinese display text as the key, based on the language configuration file.

[0066] The runtime support module is used to provide translation template files to the internationalization runtime library for loading, enabling multilingual switching functionality.

[0067] Example 3

[0068] This embodiment provides an electronic device, including: a processor and a memory connected to the processor; the memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory to implement the rapid internationalization method based on Vue2 as described in Embodiment 1.

[0069] Example 4

[0070] The present invention also provides a computer-readable storage medium storing computer-executable instructions, which, when executed, are used to implement the Vue2-based rapid internationalization method as described in Example 1.

[0071] This invention addresses the problems of existing Vue2 internationalization solutions from multiple dimensions, including development efficiency, maintenance costs, and compatibility. The specific effects are as follows:

[0072] Development efficiency is significantly improved, and manual operation costs are reduced. Existing technologies require manually defining placeholders and maintaining a two-layer mapping of "placeholder-Chinese-translation". This solution directly associates the original Chinese text with specific placeholder identifiers, eliminating the "Chinese-placeholder" mapping layer. Developers do not need to pre-design placeholder key names; they can directly write Chinese text and specific placeholder identifiers (such as $lc('login')), significantly improving development efficiency.

[0073] Automated text extraction and template generation; automatically scans all .vue files using Node.js and @vue / compiler-dom, extracts Chinese text wrapped by specific placeholders, and generates translation templates. No manual compilation of translation lists is required, reducing repetitive work, making it especially suitable for large projects and saving development time.

[0074] The translation and maintenance process is simplified, reducing collaboration costs; the translation template uses Chinese text as the key (such as "username":{"en":""}), and translators can directly fill in the translation content based on the original Chinese text without having to look up the meaning of placeholders in the code.

[0075] It boasts strong compatibility and supports non-intrusive modifications. Without altering the original code structure, internationalization of existing systems requires no adjustment to component logic; simply adding specific placeholders before Chinese text generates translation templates via script. Independent of the build toolchain, it runs independently via Node.js scripts, without relying on Webpack or other build tool configurations, and is compatible with various project architectures (such as VueCLI and Vite). Even if the project does not integrate vue-i18n, templates can be generated using this solution before integrating the runtime library, significantly improving flexibility.

[0076] The multilingual support is flexible and supports dynamic updates. Adding a new language requires zero code modification. To support a new language (such as Vietnamese), simply modify the language list in the configuration file (e.g., `langs:['zh-cn','vi']`), and rerun the script to generate the corresponding translation template; no component code modification is needed. Text changes are automatically synchronized. When the Chinese text in a component is modified, re-running the script automatically updates the key names in the translation template and retains the translated content. Unmodified text translations remain unaffected, avoiding translation file invalidation issues caused by text changes.

[0077] Runtime performance optimization ensures system stability; structured loading of translation files generates clear JSON translation templates, and parsing efficiency is significantly improved compared to unstructured solutions when loaded using runtime libraries such as vue-i18n, especially in mobile devices with weak network conditions, resulting in faster page rendering. Runtime logic overhead is reduced; there's no need to dynamically match placeholders with the original Chinese text at runtime, as translation content is directly retrieved via Chinese key names, reducing JavaScript execution overhead and system memory usage.

[0078] The technical solution is highly versatile and covers a wide range of needs; it supports complex template structures and can extract HTML attribute text (such as placeholder="$lc('search')"), component nesting text (such as the $lc identifier in a child component), and instruction-wrapped text (such as text under a v-if condition), ensuring that no content that needs to be translated in the project is missed.

[0079] Adapted to enterprise-level management systems, this solution addresses the internationalization needs of numerous forms, buttons, and prompt texts within these systems. By automating processes, it avoids human error and is particularly suitable for scenarios with stringent multilingual support requirements, such as finance and government.

[0080] In the description of this embodiment, it should be noted that those skilled in the art will understand that all or part of the processes in the above-described embodiments can be implemented by a computer program instructing a control device. The program can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes of the above-described method embodiments. The storage medium can be a memory, a disk, an optical disk, etc.

[0081] While the present invention has been disclosed above, it is not limited thereto. Any person skilled in the art can make various modifications and alterations without departing from the spirit and scope of the invention; therefore, the scope of protection of the present invention should be determined by the scope defined in the claims.

[0082] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0083] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0084] The above description of the disclosed embodiments enables those skilled in the art to make or use the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A rapid internationalization method based on Vue2, characterized in that, Includes the following steps: Add specific placeholder markers to the original Chinese text that needs to be internationalized in Vue component templates; Traverse the .vue files in the project using Node.js's file read / write module; Use Vue's template compiler to parse the traversed .vue files and extract the Chinese text displayed that is wrapped by specific placeholders; Based on a predefined language configuration file, a multilingual translation template file is generated, wherein the extracted original Chinese display text is used as the translation key.

2. The rapid internationalization method based on Vue2 according to claim 1, characterized in that, The language configuration file contains a list of language codes that the project needs to support and configuration information for the output path of translation template files.

3. The rapid internationalization method based on Vue2 according to claim 2, characterized in that, The translation template file is in JSON format.

4. The rapid internationalization method based on Vue2 according to claim 3, characterized in that, The specific placeholder is identified as an interpolation expression or a custom directive in the Vue template syntax.

5. The rapid internationalization method based on Vue2 according to claim 1, characterized in that, The Vue template compiler is @vue / compiler-dom.

6. The rapid internationalization method based on Vue2 according to claim 1, characterized in that, Also includes: The generated translation template file is provided to the internationalization runtime library for loading, enabling multilingual switching functionality.

7. A rapid internationalization system based on Vue2, characterized in that, include: The placeholder tag module is used to add specific placeholder tags to the original Chinese text that needs to be internationalized in Vue component templates during the development phase; The file traversal module is used to traverse .vue component files in the project source code using Node.js's file system module; The text extraction module is used to parse .vue files using Vue's template compiler and extract the original Chinese text displayed in placeholders. The template generation module is used to generate multilingual translation template files with the original Chinese display text as the key, based on the language configuration file.

8. The rapid internationalization system based on Vue2 according to claim 7, characterized in that, Also includes: The runtime support module is used to provide translation template files to the internationalization runtime library for loading, enabling multilingual switching functionality.

9. An electronic device, characterized in that, include: A processor, and a memory connected to the processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory to implement the Vue2-based rapid internationalization method as described in any one of claims 1-6.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed, are used to implement the rapid internationalization method based on Vue2 as described in any one of claims 1-6.

Images