Vue プロジェクトはバージョン番号を自動的に設定し、バージョン番号の変更によりキャッシュがクリアされます。

序文

プロジェクトをパッケージ化するたびにプロジェクトのバージョン番号を手動で変更する必要があり、そのたびにpackage.jsonのバージョンを修正する必要があり面倒です。

プロジェクトが更新された後、ファイルはキャッシュ内に存在するため、更新をレンダリングするには更新する必要があります

解決する

npm の依存関係をインストールする

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

package.json以下をファイルに追加しますscripts

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

プロジェクトのルートディレクトリにフォルダーを作成し、buildそのフォルダーの下にversion.jsファイルを作成します

ファイルversion.jsに次のコードを追加します

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}`);
}

コマンドを実行してnpm run buildプロジェクトをビルドします。ビルドするたびに、バージョン番号が自動的に更新され、キャッシュがクリアされます。

こうすることで、ビルドするたびに新しいバージョン番号が自動的に設定され、キャッシュが最新の状態に保たれます。毎回ビルドする前に必ずnpm run buildコマンドを実行してください

エピローグ

ブログ投稿を読んでフォローしてくれた読者に感謝し、記事内で言及された意見、提案、批判に対して感謝の意を表します。

Vue プロジェクトはバージョン番号を自動的に設定し、バージョン番号の変更によりキャッシュがクリアされます。

Vue プロジェクトはバージョン番号を自動的に設定し、バージョン番号の変更によりキャッシュがクリアされます。

序文

解決する

エピローグ

おすすめ