Le projet Vue définit automatiquement le numéro de version et le changement de numéro de version efface le cache

avant-propos

Chaque fois que le projet est empaqueté, le numéro de version du projet doit être modifié manuellement. Ce changement nécessite de modifier la version dans package.json à chaque fois, ce qui est gênant.

Une fois le projet mis à jour, le fichier existe dans le cache et doit être actualisé pour afficher la mise à jour.

résoudre

Installer les dépendances npm

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

package.jsonAjoutez ce qui suit à votre fichierscripts

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

Créez un dossier dans le répertoire racine de votre projet et créez un fichier buildsous ce dossierversion.js

version.jsAjoutez le code suivant dans le fichier

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

Exécutez npm run buildla commande pour créer le projet. Chaque fois que vous construisez, le numéro de version sera mis à jour automatiquement et le cache sera vidé

De cette façon, un nouveau numéro de version est automatiquement défini à chaque fois que vous construisez et le cache est maintenu à jour. npm run buildAssurez-vous d'exécuter la commande avant chaque build

épilogue

Remerciez les lecteurs d'avoir lu et suivi les articles de blog et exprimez votre gratitude pour les opinions, suggestions ou critiques mentionnées dans les articles.