HTML页面中，如何给css和js文件增加人工版本控制工作中有个迷你小项目，页面实现是用vue的单页面应用。页面是HT

工作中有个迷你小项目，页面实现是用vue的单页面应用。

页面是HTML文件，页面构成元素是如下。css和js文件引入时，都是固定的文件名，存在一个问题：版本发布时，用户本地会有缓存，无法获取到最新的css、js文件内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>document title</title>
  <!-- 引入css文件 -->
  <link rel="stylesheet" type="text/css" href="./css/fileName.css" />
  <!-- 引入js -->
  <script src="js/fileName.js"></script>
  <script src="./utils/utils.js"></script>
</head>

<body>
  <div id="app">
    <!-- 页面内容 -->
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {},
      computed: {},
      mounted: function () {},
      methods: {}
    })
  </script>
</body>
</html>

但是，HTML页面，又不存在node 命令打包，也不能用其他webpack打包插件。

因此，想了一个人工维护版本号的方法。

在utils.js文件中，加一个动态引入带版本号的css的方法

// 此版本号，需人工维护。用来控制，除utils.js之外的，其他文件的版本号
const DEFAULT_VERSION_NUMBER = 0.01

function getHash() {
  const vNum = 'v' + DEFAULT_VERSION_NUMBER
  return vNum
}

function dySetCssWithNum(cssFilePathArr) {
  const V_NUMBER = getHash()
  if (!cssFilePathArr && !Array.isArray(cssFilePathArr)) return
  for (let i = 0; i < cssFilePathArr.length; i++) {
    const filePath = cssFilePathArr[i]
    document.write("<link rel='stylesheet' type='text/css' href='" + filePath  + "?v=" + V_NUMBER + "'>"); 
  }

}

在HTML中使用，注意<script src="./utils/utils.js"></script>需要先引入

<head>
    <script src="./utils/utils.js"></script>
    <script type="text/javascript">
      // 需要加版本号的css文件路径，写于此
      const cssFiles = [
        "./css/reset.css",
        "./css/init.css",
        "./css/homepage.css",
        "./css/common.css"
      ]
      dySetCssWithNum(cssFiles)
    </script>

</head>

<script src="./utils/utils.js"></script>也单独改成动态版本号引入，不然也会有缓存

<head>
  cript type="text/javascript">
    // utils.js 只能每次都去刷内容，其他css文件，由人工维护版本号
    const DY_V_NUMBER = new Date().getTime()
    document.write("<script src='./utils/utils.js?v=" + DY_V_NUMBER + "'><\/script>");
  </script>
</head>