vue-cli3를 사용하는 과정에서 로컬 및 테스트 환경에서는 conlog의 js를 사용하는데 프로덕션 환경에서는 사용하지 않고, 하나씩 삭제하다 보면 문제가 발생하기 쉽고, 삭제를 놓치기도 쉽습니다. vue-cli3의 구성 파일을 대충 살펴보면 이런 종류의 파일을 전처리하는 방법을 찾았지만 플러그인 형태로 처리할 수 있다는 것을 발견했습니다. ins, 정규 교체를 사용하여 일치하는 모든 파일을 삭제하기 위해 노드 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 (오류);
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('替换错误');
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 소스 코드