vue-cli3 單文件及多文件.html 文件預處理 按需刪除部分無用js 文件

在使用vue-cli3 的過程中,本地及測試環境使用conlog 的js,但生產環境用不到,挨個刪容易出問題,也容易漏刪,粗略的看了下vue-cli3 的配置文件,並未找到這類文件預處理的方式,但發現可以用插件的形式處理,因爲對插件不是很熟悉,所以使用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(error);
   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 會自動刪除,時間原因沒有研究怎麼處理。還有一個辦法就是,寫個插件在編譯過程中執行替換操作,有大神知道怎麼弄,可以留言指導一下。

 

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

html 源碼

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章