vuejs 自动更新版本号到后台页面模板

本文讲述 vuejs 单页应用生成的文件版本号如何自动更新到后台的模板文件中。对于 SPA 单页应用，通常的部署流程为:打包编译页面工程 -> 提取版本号 -> 更新版本号到后台服务中的页面模板中。发布是个频繁的操作，这样的流程势必影响效率。那么本文就教您如何提高效率，做到全程自动化。当然该方法也适用于其它的 spa 应用，如 reactjs 等。

1. 定义页面模板的占位符

此处以 springboot 为例, 页面模板的变量值通过 PageController 注入。
PageController 的关键代码如下:

/**
 * 页面控制器
 */
@Controller
@Log4j2
public class PageController {
    /**
     * 匹配所有页面路由
     *
     * @param model
     * @return
     */
    @GetMapping({"/", "/back/**/*.html"})
    public String page(HttpServletRequest request, HttpServletResponse response,
                       Model model) {
        log.info("requestUrl[{}], remoteHost[{}], remoteAddr[{}], ", request.getRequestURL(), request.getRemoteHost(), request.getRemoteAddr());
        model.addAttribute("appJs", "dist/js/app.appJsVersionPlaceholder.js");
        model.addAttribute("appCss", "dist/css/app.appCssVersionPlaceholder.css");
        model.addAttribute("chunkVendorsJs", "dist/js/chunk-vendors.chunkVendorsJsVersionPlaceholder.js");
        return "back";
    }
}

提示

appJsVersionPlaceholder、appCssVersionPlaceholder 和 chunkVendorsJsVersionPlaceholder 是预留出来的版本号占位符，后续步骤会使用到。

2. 编写版本号自动更新脚本

通过 Makefile 写一个版本号自动更新任务

################ start 定义变量 ######################
#页面的工程根路径
PAGE-DIR=/data/workspace/wangshibiao/pageProjectName
#PageController文件的路径
PAGE-CONTROLLER-PATH=../src/main/java/com/wangshibiao/backProjectName/PageController.java
################ end 定义变量 ######################

#发布页面到测试
publish-page:
#	生成版本号
	cd ${PAGE-DIR} && make publish | grep KiB | grep dist > ${PAGE-DIR}/publish_content.tmp

#	替换源码中的版本号占位符为实际的版本号
	cat ${PAGE-DIR}/publish_content.tmp | grep app | grep dist/js | awk -F '.' '{print $$2}' | xargs -I '{}' sed -i 's/appJsVersionPlaceholder/{}/g' ${PAGE-CONTROLLER-PATH}
	cat ${PAGE-DIR}/publish_content.tmp | grep app | grep dist/css | awk -F '.' '{print $$2}' | xargs -I '{}' sed -i 's/appCssVersionPlaceholder/{}/g' ${PAGE-CONTROLLER-PATH}
	cat ${PAGE-DIR}/publish_content.tmp | grep chunk-vendors | grep dist/js | awk -F '.' '{print $$2}' | xargs -I '{}' sed -i 's/chunkVendorsJsVersionPlaceholder/{}/g' ${PAGE-CONTROLLER-PATH}

提示

需要将 PAGE-DIR 和 PAGE-CONTROLLER-PATH 改为实际的路径。

3. 执行任务

在 Makefile 所在目录执行如下命令即可
make publish-page