vue cli 直接打包成 index.jsp 文件

前端项目直接打包成 index.jsp 文件

公司前端项目打包文件的发布和服务端文件是合并在一起，统一进行发布的，前端项目打包文件默认为 index.html ，为了满足统一发布的需求，需要将 index.html 修改为 index.jsp 文件，同时在文件头部添加 jsp 的标识，如果每次都通过手动方式修改，会很繁琐而且容易出错。

目标：通过工程配置，打包时自动生成 index.jsp 文件

打包过程分析

公司前端项目为 @vue/cli 创建的项目或自搭 webpack 的项目，@vue/cli 其实是对 webpack 进行了一层封装，免去了复杂的 webpack 项目配置，可以迅速的开始项目开发。

既然底层都是 webpack ，就可以来分析 webpack 的打包过程。

上图可以清晰的看到，webpack 的作用是将模块化资源文件，打包成统一的静态资源文件。也就是模块化的 .vue、.js、.scss、.less、.jpg，打包成 .js、.css、.jpg。

上图并没有描述如何将打包后的 js 等文件如何打包成 index.html 的过程的，这一步其实是通过 htmlWebpackPlugin 来完成工作的。关于 webpack plugin 的内容点击这里。

因此整个 webpack 的打包流程是这样的：

1. 通过各类 loader 将项目中的各类模块化资源，打包成静态资源
2. 通过 output 配置，使用 htmlWebpackPlugin 插件，使用 index.html 模板，将第一步打包的静态资源进行整合，生成最终的发布文件。

实现思路

通过打包过程分析，我们可以看到，如果想要实现通过工程配置，打包时自动生成 index.jsp 文件的目标，其实没有我们想象中的复杂，只需要修改打包流程的第二步即可，其中我拆分为两步，便于理解：

1. 将 index.html 模板替换。

   可以直接修改 index.html 文件，将文件重命名为 index.jsp，在文件开头位置，加上 jsp 文件标识 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

2. 替换 htmlWebpackPlugin 插件。

   可以使用 raw-loader 将模板文本直接复制。

如此，我们就可以将打包生成发布文件的核心流程修改为我们想要的结果。

实现步骤

理清实现思路后，就要将其实现，下文将以 @vue/cli 项目为主要实施目标去进行实现，webpack 项目的实现步骤可以参考去对应实现。

1. 通过 npm install raw-loader -D 命令，在开发环境添加 webpack loader。

2. 修改 public/index.html 文件模板为 index.jsp ，修改方式可参考实现思路内的步骤。

3. 修改 vue.config.js 文件中 webpack 配置。

   module.export = {
       ...
       chainWebpack:(config)=>{
           ...
          	// 解析 jsp 文件，通过 raw-loader 插件，将 jsp 模板原文复制
           config.module.rule("jsp").test(/\.jsp$/).use("raw-loader").loader("raw-loader").end();
           ...
       }
       ...
   }
   

4. 修改 vue.config.js 文件中打包 output 配置

   module.export = {
       ...
   	pages: {
           index: {
               entry: "src/main.js", //打包入口文件
               template: "public/index.jsp", //使用的模板文件
               filename: "index.jsp" //打包后文件名称
           }
       }
       ...
   }
   

5. 需要注意的地方：

   在 @vue/cli 默认生成的 public/index.html 文件中，会有一段 <%= htmlWebpackPlugin.options.title %>，这是在打包时，使用 htmlWebpackPlugin 插件，在项目未能成功正常工作时，显示的提示文本中插入项目名称（ pagekage.js 中的 name 字段内容），但是该内容在使用 raw-loader 时会直接复制过去，不再进行处理，同时服务端的 jsp 文本处理器无法处理该命令（ jsp 的文本命令格式就是如此），服务器处理时会报 500 错误。

   解决办法：将此行命令删除。