CN117742775A - 兼容浏览器路由History和Hash模式的Webpack打包方法 - Google Patents

Abstract

本发明涉及通信技术领域，具体涉及兼容浏览器路由History和Hash模式的Webpack打包方法，具体包括以下步骤：S101.通过React Router的路由管理框架，提供路由管理和切换功能，支持History模式和Hash模式，S102.按照路由规则进行页面组织，将每个路由对应的组件放置在一个单独的文件夹内，根据不同的路由模式，采用不同的打包方式，确定项目使用的路由模式，根据路由模式进行判断，分别设置打包规则，得到路由模式的判断结果，确定项目使用的打包规则。本发明使用React Router路由管理框架，可以实现浏览器的History和hash模式的兼容，在不同浏览器和环境中都能正常访问应用程序，根据不同的路由模式采用不同的打包方式，能够减少打包后的文件体积，提升应用的加载速度。

Description

兼容浏览器路由History和Hash模式的Webpack打包方法

技术领域

本发明涉及通信技术领域，具体涉及兼容浏览器路由History和Hash模式的Webpack打包方法。

背景技术

目前Htm15页面如果采用路由的History模式部署后，在切换路由地址后刷新页面，会出现404错误，当前的解决方案为在Nginx上做代理,当出现404时返回根目录获取index.html文件。

现有的打包方法每次新项目部署都需要配置Ngnix代理，造成部署成本上升，配置Nginx时，会对生产环境产生安全隐患，通常Nginx配置权限集中管理在SRE部门，每次配置都需要与SRE人员沟通增加部署成本。

发明内容

本发明针对现有技术中存在的技术问题，提供兼容浏览器路由History和Hash模式的Webpack打包方法。

本发明解决上述技术问题的技术方案如下：兼容浏览器路由History和Hash模式的Webpack打包方法，具体包括以下步骤：

S101.通过React Router的路由管理框架，提供路由管理和切换功能，支持History模式和Hash模式；

S102.按照路由规则进行页面组织，将每个路由对应的组件放置在一个单独的文件夹内；

S103.根据不同的路由模式，采用不同的打包方式，确定项目使用的路由模式，根据路由模式进行判断，分别设置打包规则；

S104.得到路由模式的判断结果，确定项目使用的打包规则。

在一个优选的实施方式中，所述S101中，打开终端并进入项目根目录，执行安装React Router依赖：npminstall react-router-dom，在应用程序中引入BrowserRouter组件，将组件包裹在BrowserRouter中，并配置路由规则，使用Route组件匹配路径对应的组件，并使用Switch组件确保只染第一个匹配的组件，在Webpack配置文件中添加devServer选项，并设置historyApiFallback为true，用于处理history模式下的路由请求，在应用程序中使用Link组件进行路由跳转，通过to属性指定目标路径。

在一个优选的实施方式中，所述S102中，按照路由规则进行页面组织，将每个路由对应的组件放置在一个单独的文件夹内，包括HTML、CSS和JavaScript文件，其具体步骤如下：创建两个分别名为Home和About的路由及其对应的组件，在项目的根目录下，创建一个名为src的文件夹用于存放源代码，当src文件夹已存在则跳过此步骤，在src文件夹内，创建一个名为pages的文件夹用于存放页面组件，当pages文件夹已存在则跳过此步骤，在pages文件夹内，创建一个名为Home的文件夹用于存放Home组件相关的文件，在Home文件夹内，创建一个名为index.htm1的文件用于编写Home组件的HTML结构，在Home文件夹内，创建一个名为styles.css的文件用于编写Home组件的样式，在Home文件夹内，创建一个名为index.js的文件用于编写Home组件的JavaScript逻辑，分别在index.html、styles.css和index.js文件中编写Home组件的HTML结构、样式和逻辑，重复创建Home、index.htm1、styles.css的文件夹并重复编写Home组件的HTML结构、样式和逻辑，创建一个名为About的文件夹编写About组件的HTML结构、样式和逻辑，用于存放Abut组件相关的文件，根据路由规则，在根目录的src文件夹中创建一个名为router.js的文件用于配置路由，在router.js文件中引入所需的依赖，包括React Router和Vue Router，根据路由规则，配置对应的路由路径和组件，在路由配置中使用import语句引入各个组件，导出路由配置，用于在应用程序中引入使用，在应用程序的主文件中，包括pp.js文件以及main.js文件，引入路由配置文件，并将路由配置文件中的路由组件渲染到合适的位置，根据具体的框架和构建工具，执行相应的命令以启动应用程序，并检查路由是否正常工作。

在一个优选的实施方式中，所述S103中，配置Webpack打包规则，根据不同的路由模式，采用不同的打包方式，确定项目使用的路由模式，包括history和hash，并在Webpack配置文件中，根据路由模式进行判断，分别设置打包规则。

在一个优选的实施方式中，所述S104中，在Webpack配置文件中，定义一个常量path，引入path模块用于处理文件路径，导入需要用到的插件包括copywebpackPlugin插件，导出Webpack配置对象，包括入口文件、输出文件、模块规则和插件的配置项，设置项目的主入口文件路径为./src/index.js’，设置输出文件的名称为bundle.js’，输出路径为通过path.0resolve()方法获取的dist’文件夹的绝对路径，设置输出文件的公共路径为“/”，用于正确加载资源文件，配置模块规则，使用babel-loader处理.js文件，并排除node_modules文件夹，配置模块规则，使用style-loader和css-loader处理.css文件，使用copywebpackPlugin插件，将根目录下的index.htm1文件复制到输出文件夹中，在开发服务器配置中，设置historyApiFal1back为true，用于处理history模式下的路由请求，在Hash模式下，Webpack默认会将所有资源文件打包到根目录下的dist文件夹中，与路由地址无关，用户在浏览器中输入或点击带有哈希片段的URL时，浏览器会通过JavaScript监听hashchange事件来捕获URL的变化，在HTML文件中，需要确保正确引用打包后的资源文件，HTML文件中应包含一个<div>元素，用于渲染应用程序的内容，使用<script>标签用打包后的JavaScript文件，通常命名为bundle.js，该文件包含了整个应用程序的逻辑，JavaScript代码监听hashchange事件，根据哈希片段的变化来进行相应的页面渲染和交互操作。

本发明还提供了一种电子设备，包括存储器和处理器，用于读取并执行计算机软件程序，进而实现兼容浏览器路由History和Hash模式的Webpack打包方法。

本发明还提供一种非暂态计算机可读存储介质，存储介质中存储有计算机软件程序，计算机软件程序被处理器执行时实现兼容浏览器路由History和Hash模式的Webpack打包方法。

本发明的有益效果是：本发明使用React Router路由管理框架，可以实现浏览器的History和hash模式的兼容，在不同浏览器和环境中都能正常访问应用程序，按照路由规则进行页面组织，将每个路由对应的组件放置在单独的文件夹内，每个文件夹内只包含该路由所需的资源，减少了文件之间的耦合性，通过Web的配置，根据不同的路由模式采用不同的打包方式，能够减少打包后的文件体积，提升应用的加载速度。

附图说明

图1为兼容浏览器路由History和Hash模式的Webpack打包方法的流程图。

图2为兼容浏览器路由History和Hash模式的Webpack电子设备的流程图。

图3为兼容浏览器路由History和Hash模式的Webpack计算机可读存储介质的流程图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

在本申请的描述中，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个所述特征。在本申请的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

在本申请的描述中，术语“例如”一词用来表示“用作例子、例证或说明”。本申请中被描述为“例如”的任何实施例不一定被解释为比其它实施例更优选或更具优势。为了使本领域任何技术人员能够实现和使用本发明，给出了以下描述。在以下描述中，为了解释的目的而列出了细节。应当明白的是，本领域普通技术人员可以认识到，在不使用这些特定细节的情况下也可以实现本发明。在其它实例中，不会对公知的结构和过程进行详细阐述，以避免不必要的细节使本发明的描述变得晦涩。因此，本发明并非旨在限于所示的实施例，而是与符合本申请所公开的原理和特征的最广范围相一致。

实施例1

如图1，本实施例提供兼容浏览器路由History和Hash模式的Webpack打包方法，具体包括以下步骤：

S101.通过React Router的路由管理框架，提供路由管理和切换功能，支持History模式和Hash模式；

S102.按照路由规则进行页面组织，将每个路由对应的组件放置在一个单独的文件夹内；

S103.根据不同的路由模式，采用不同的打包方式，确定项目使用的路由模式，根据路由模式进行判断，分别设置打包规则；

S104.得到路由模式的判断结果，确定项目使用的打包规则。

本实施例中需要具体说明的是S101，所述S101中，打开终端并进入项目根目录，执行安装React Router依赖：npminstall react-router-dom，在应用程序中引入BrowserRouter组件，将组件包裹在BrowserRouter中，并配置路由规则，使用Route组件匹配路径对应的组件，并使用Switch组件确保只染第一个匹配的组件，在Webpack配置文件中添加devServer选项，并设置historyApiFallback为true，用于处理history模式下的路由请求，在应用程序中使用Link组件进行路中跳转，通过to属性指定目标路径。

本实施例中需要具体说明的是S102，所述S102中，按照路由规则进行页面组织，将每个路由对应的组件放置在一个单独的文件夹内，包括HTML、CSS和JavaScript文件，其具体步骤如下：创建两个分别名为Home和About的路由及其对应的组件，在项目的根目录下，创建一个名为src的文件夹用于存放源代码，当src文件夹已存在则跳过此步骤，在src文件夹内，创建一个名为pages的文件夹用于存放页面组件，当pages文件夹已存在则跳过此步骤，在pages文件夹内，创建一个名为Home的文件夹用于存放Home组件相关的文件，在Home文件夹内，创建一个名为index.htm1的文件用于编写Home组件的HTML结构，在Home文件夹内，创建一个名为styles.css的文件用于编写Home组件的样式，在Home文件夹内，创建一个名为index.js的文件用于编写Home组件的JavaScript逻辑，分别在index.html、styles.css和index.js文件中编写Home组件的HTML结构、样式和逻辑，重复创建Home、index.htm1、styles.css的文件夹并重复编写Home组件的HTML结构、样式和逻辑，创建一个名为About的文件夹编写About组件的HTML结构、样式和逻辑，用于存放Abut组件相关的文件，根据路由规则，在根目录的src文件夹中创建一个名为router.js的文件用于配置路由，在router.js文件中引入所需的依赖，包括React Router和Vue Router，根据路由规则，配置对应的路由路径和组件，在路由配置中使用import语句引入各个组件，导出路由配置，用于在应用程序中引入使用，在应用程序的主文件中，包括pp.js文件以及main.js文件，引入路由配置文件，并将路由配置文件中的路由组件渲染到合适的位置，根据具体的框架和构建工具，执行相应的命令以启动应用程序，并检查路由是否正常工作。

本实施例中需要具体说明的是S103，所述S103中，配置Webpack打包规则，根据不同的路由模式，采用不同的打包方式，确定项目使用的路由模式，包括history和hash，并在Webpack配置文件中，根据路由模式进行判断，分别设置打包规则；

进一步地，对于History模式，将根目录下的index.html文件复制到每个路由地址对应的文件夹内，在Webpack配置文件中，对于History模式，设置output.publicPath为"/"，用于正确加载资源文件，当正确设置output.publicPath后的打包的资源文件路径为相对于根目录的路径；

进一步地，对于Hash模式，不进行额外的配置，Webpack默认将所有资源文件打包到根目录下的dist文件夹中，与路由地址无关。

本实施例中需要具体说明的是S104，所述S104中，在Webpack配置文件中，定义一个常量path，引入path模块用于处理文件路径，导入需要用到的插件包括copywebpackPlugin插件，导出Webpack配置对象，包括入口文件、输出文件、模块规则和插件的配置项，设置项目的主入口文件路径为./src/index.js’，设置输出文件的名称为bundle.js’，输出路径为通过path.0resolve()方法获取的dist’文件夹的绝对路径，设置输出文件的公共路径为“/”，用于正确加载资源文件，配置模块规则，使用babel-loader处理.js文件，并排除node_modules文件夹，配置模块规则，使用style-loader和css-loader处理.css文件，使用copywebpackPlugin插件，将根目录下的index.htm1文件复制到输出文件夹中，在开发服务器配置中，设置historyApiFal1back为true，用于处理history模式下的路由请求；

在Hash模式下，Webpack默认会将所有资源文件打包到根目录下的dist文件夹中，与路由地址无关，用户在浏览器中输入或点击带有哈希片段的URL时，浏览器会通过JavaScript监听hashchange事件来捕获URL的变化，在HTML文件中，需要确保正确引用打包后的资源文件，HTML文件中应包含一个<div>元素，用于渲染应用程序的内容，使用<script>标签用打包后的JavaScript文件，通常命名为bundle.js，该文件包含了整个应用程序的逻辑，JavaScript代码监听hashchange事件，根据哈希片段的变化来进行相应的页面渲染和交互操作。

请参阅图2，图2为本发明实施例提供的电子设备的实施例示意图。如图3所示，本发明实施例提出了一种电子设备500，包括存储器510、处理器520及存储在存储器510上并可在处理器520上运行的计算机程序511，处理器520执行计算机程序511时实现以下步骤：

S101.通过React Router的路由管理框架，提供路由管理和切换功能，支持History模式和Hash模式；

S102.按照路由规则进行页面组织，将每个路由对应的组件放置在一个单独的文件夹内；

S103.根据不同的路由模式，采用不同的打包方式，确定项目使用的路由模式，根据路由模式进行判断，分别设置打包规则；

S104.得到路由模式的判断结果，确定项目使用的打包规则；

请参阅图3，图3为本发明实施例提供的一种计算机可读存储介质的实施例示意图。如图3所示，本实施例提供了一种计算机可读存储介质600，其上存储有计算机程序611。

需要说明的是，在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述的部分，可以参见其它实施例的相关描述。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式计算机或者其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包括这些改动和变型在内。

Claims (10)

1.兼容浏览器路由History和Hash模式的Webpack打包方法，其特征在于，包括以下步骤：

S101.通过React Router的路由管理框架，提供路由管理和切换功能，支持History模式和Hash模式；

S102.按照路由规则进行页面组织，将每个路由对应的组件放置在一个单独的文件夹内；

S103.根据不同的路由模式，采用不同的打包方式，确定项目使用的路由模式，根据路由模式进行判断，分别设置打包规则；

S104.得到路由模式的判断结果，确定项目使用的打包规则。

2.根据权利要求1所述的兼容浏览器路由History和Hash模式的Webpack打包方法，其特征在于，所述S101中，进入项目根目录，执行安装React Router依赖：npminstall react-router-dom，在应用程序中引入BrowserRouter组件，将组件包裹在BrowserRouter中，并配置路由规则，使用Route组件匹配路径对应的组件，并使用Switch组件确保只染第一个匹配的组件，在Webpack配置文件中添加devServer选项，并设置historyApiFallback为true，用于处理history模式下的路由请求，在应用程序中使用Link组件进行路中跳转，通过to属性指定目标路径。

3.根据权利要求1所述的兼容浏览器路由History和Hash模式的Webpack打包方法，其特征在于，所述S102中，按照路由规则进行页面组织，将每个路由对应的组件放置在一个单独的文件夹内，包括HTML、CSS以及JavaScript文件，其具体步骤如下：创建两个分别名为Home和About的路由及其对应的组件，在项目的根目录下，创建一个名为src的文件夹用于存放源代码，src文件夹已存在则跳过此步骤，在src文件夹内，创建一个名为pages的文件夹用于存放页面组件，pages文件夹已存在则跳过此步骤，在pages文件夹内，创建一个名为Home的文件夹用于存放Home组件相关的文件，在Home文件夹内，创建一个名为index.htm1的文件用于编写Home组件的HTML结构，在Home文件夹内，创建一个名为styles.css的文件用于编写Home组件的样式，在Home文件夹内，创建一个名为index.js的文件用于编写Home组件的JavaScript逻辑，分别在index.html、styles.css以及index.js文件中编写Home组件的HTML结构、样式和逻辑，重复创建Home、index.htm1、styles.css的文件夹并重复编写Home组件的HTML结构、样式和逻辑，创建一个名为About的文件夹编写About组件的HTML结构、样式以及逻辑，用于存放Abut组件相关的文件，根据路由规则，在根目录的src文件夹中创建一个名为router.js的文件用于配置路由，在router.js文件中引入所需的依赖，包括React Router和Vue Router，根据路由规则，配置对应的路由路径和组件，在路由配置中使用import语句引入各个组件，导出路由配置，用于在应用程序中引入使用，在应用程序的主文件中，包括pp.js文件以及main.js文件，引入路由配置文件，并将路由配置文件中的路由组件渲染到合适的位置，根据具体的框架和构建工具，执行相应的命令以启动应用程序。

4.根据权利要求1所述的兼容浏览器路由History和Hash模式的Webpack打包方法，其特征在于，所述S103中，配置Webpack打包规则，根据不同的路由模式，采用不同的打包方式，确定项目使用的路由模式，包括history以及hash，并在Webpack配置文件中，根据路由模式进行判断，分别设置打包规则。

5.根据权利要求1所述的兼容浏览器路由History和Hash模式的Webpack打包方法，其特征在于，所述History模式，将根目录下的index.html文件复制到每个路由地址对应的文件夹内，在Webpack配置文件中，对于History模式，设置output.publicPath为"/"，用于正确加载资源文件，当正确设置output.publicPath后的打包的资源文件路径为相对于根目录的路径。

6.根据权利要求1所述的兼容浏览器路由History和Hash模式的Webpack打包方法，其特征在于，所述Hash模式，Webpack默认将所有资源文件打包到根目录下的dist文件夹中。

7.根据权利要求1所述的兼容浏览器路由History和Hash模式的Webpack打包方法，其特征在于，所述S104中，根据路由模式得到的判断结果，确定History和Hash的打包规则，所述History的打包规则为，在Webpack配置文件中，定义一个常量path，引入path模块用于处理文件路径，导入需要用到的插件包括copywebpackPlugin插件，导出Webpack配置对象，设置项目的主入口文件路径为index.js’，设置输出文件的名称为bundle.js’，输出路径为通过path.0resolve()方法获取的dist文件夹的绝对路径，使用babel-loader处理.js文件，排除node_modules文件夹，配置模块规则，使用style-loader和css-loader处理.css文件，使用copywebpackPlugin插件，将根目录下的index.htm1文件复制到输出文件夹中，在开发服务器配置中，设置historyApiFal1back为true，用于处理history模式下的路由请求。

8.根据权利要求1所述的兼容浏览器路由History和Hash模式的Webpack打包方法，其特征在于，所述Hash的打包规则为Webpack默认会将所有资源文件打包到根目录下的dist文件夹中，用户在浏览器中输入带有哈希片段的URL时，浏览器会通过JavaScript监听hashchange事件来捕获URL的变化，将打包后的JavaScript文件，命名为bundle.js，该文件包含了整个应用程序的逻辑，JavaScript代码监听hashchange事件，根据哈希片段的变化来进行相应的页面渲染和交互操作。

9.一种电子设备，其特征在于，包括：

存储器，用于存储计算机软件程序；

处理器，用于读取并执行所述计算机软件程序，进而实现权利要求1-7任一项所述的兼容浏览器路由History和Hash模式的Webpack打包方法。

10.一种非暂态计算机可读存储介质，其特征在于，所述存储介质中存储有计算机软件程序，所述计算机软件程序被处理器执行时实现如权利要求1-8任一项所述的兼容浏览器路由History和Hash模式的Webpack打包方法。