The Vue project automatically sets the version number, and the version number change clears the cache

The Vue project automatically sets the version number, and the version number change clears the cache

foreword

Every time the project is packaged, the project version number needs to be manually changed. This change needs to modify the version in package.json every time, which is troublesome.

After the project is updated, the file exists in the cache and needs to be refreshed to render the update

solve

• Install npm dependencies

  npm install --save-dev @intervolga/[email protected] [email protected] [email protected] [email protected]
  

• package.jsonAdd the following to your filescripts

  "scripts": {
        
        
     "version": "node ./build/version.js",
     "build": "npm run version && vue-cli-service build"
  }
  

• Create a folder in your project root directory , and create a file buildunder that folderversion.js

• version.jsAdd the following code in the file

  const fs = require('fs');
  const path = require('path');
  const moment = require('moment');
  
  const packageJsonPath = path.resolve(__dirname, '../package.json');
  const indexPath = path.resolve(__dirname, '../public/index.html');
  
  // 读取 package.json 文件
  const packageJson = fs.readFileSync(packageJsonPath, 'utf8');
  const packageData = JSON.parse(packageJson);
  
  // 获取当前的版本号
  const currentVersion = packageData.version;
  
  // 生成新的版本号
  const newVersion = moment().format('YYYYMMDDHHmmss');
  
  if (currentVersion !== newVersion) {
        
        
    // 更新 package.json 中的版本号
    packageData.version = newVersion;
    fs.writeFileSync(packageJsonPath, JSON.stringify(packageData, null, 2));
  
    // 清空缓存
    const indexHtml = fs.readFileSync(indexPath, 'utf8');
    const newHtml = indexHtml.replace(/(src|href)=(['"])([^"']+)(["'])/g, (match, p1, p2, p3, p4) => {
        
        
      let newUrl = p3;
      if (newUrl.includes('?')) {
        
        
        newUrl = newUrl.split('?')[0];
      }
      return `${
          
          p1}=${
          
          p2}${
          
          newUrl}?v=${
          
          newVersion}${
          
          p4}`;
    });
  
    fs.writeFileSync(indexPath, newHtml);
  
    console.log(`Version updated: ${
          
          currentVersion} -> ${
          
          newVersion}`);
  }
  

• Run npm run buildthe command to build the project. Every time you build, the version number will be updated automatically and the cache will be cleared

This way, a new version number is automatically set each time you build, and the cache is kept up to date. npm run buildMake sure to run the command before every build

epilogue

Thank readers for reading and following blog posts, and express gratitude for opinions, suggestions, or criticisms mentioned in articles