vue-cli3 单文件及多文件.html 文件预处理 按需删除部分无用js 文件

21 篇文章 0 订阅
4 篇文章 0 订阅

在使用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 源码

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值