vue-cli3 単一ファイルと複数ファイルの .html ファイルの前処理により、不要な js ファイルをオンデマンドで削除します

vue-cli3 を利用する過程で、ローカル環境やテスト環境では conlog の js を利用していますが、本番環境では利用していないため、逐一削除すると問題が発生しやすく、削除漏れも発生しやすくなります。 vue-cli3 の設定ファイルをざっと見たところ、この種のファイルを前処理する方法は見つかりませんでしたが、プラグインの形で処理できることがわかりました。 ins では、node js ファイル処理を使用して、定期的な置換を使用して一致するすべてのファイルを削除しました。

これは、パッケージ化後の複数のファイルの保存アドレスです。

これは、運用環境にデプロイするときに実行するコマンドです。非常に単純です。パッケージ化した後、置換ファイルを実行し、一致するすべての HTML コンテンツを置き換えます。

以下は、HTMLを置き換えて処理するメインコードです。

var fs = require( 'fs' ); 
const glob = require('glob'); 
/** 
 * html文件入れ替え
 * @param src 
 * @param dst 
 */ 
var callbackFile = function( src ){ 
 fs.readFile(src,'utf8',function(error,data){ 
  if(error){ 
   console.log (エラー); 
   return false; 
  } 
  let regJs = new RegExp(/<!--\[if !\(IE 5.5\)]><!-->[\s\S]*<!--<!\ [endif]-->/,'g'); 
  let htmlContent = data.toString().replace(regJs,''); 
  fs.writeFile(src,htmlContent,'utf8',function(error){ 
   if(error ) ){ 
    console.log('代替错误'); 
    return false; 
   } 
  }) 
 }) 
};
glob.sync( './dist/*.html').forEach((filepath) => { 
 let fileNameList = filepath.split('.'); 
 let fileName = fileNameList[1].split('/')[ 2];//複数ページのページディレクトリ
 //console.log(fileName) 
 let thisDirectory = `./dist/${fileName}.html`;//複数ページの JS ファイル格納アドレス
 callbackFile(thisDirectory) 
});

glob.sync( './dist/*.html') これを独自のファイルパスに変更できます。

これはブラウザがIE5.5かどうかを判断するソースファイルですこのように書いているのは、他のコメントメソッドがvue-cli3で自動削除されるためです時間の都合上、ありません対処方法を研究すること。もう 1 つの方法は、コンパイルプロセス中に置換操作を実行するプラグインを作成することです。その方法を知っている人がいる場合は、ガイダンスとしてメッセージを残すことができます。

<!--[if !(IE 5.5)]><!--> 
<script src="//www.baidu.comx/page/base/vconsole.min.js"></script> 
<!-- <![endif]-->

htmlソースコード

vue-cli3 単一ファイルと複数ファイルの .html ファイルの前処理により、不要な js ファイルをオンデマンドで削除します

おすすめ