vue cli 打包生成 index.jsp 文件

·  阅读 241

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

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

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

打包过程分析

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

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

image-20211101094140318

上图可以清晰的看到,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 错误。

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

所有的解决方案都是为了项目的实现,区别是有没有更好的方法,在现有条件无法优化发布流程时,寻找更优方案去优化当前流程。

分类:
前端
标签:
分类:
前端
标签: