import { createApp } from "vue";
import { createMetaManager} from 'vue-meta'

const app = createApp(App);

app.use(createMetaManager(false, {
        meta: { tag: 'meta', nameless: true }
    }));
app.mount("#app");

4. 鍦?code>App.vue涓坊鍔?code>鏍囩锛?strong>涓€瀹氳娣诲姞锛屼笉鐒朵笉鐢熸晥鍝?/strong>

3. 鍦ㄧ粍浠朵腑浣跨敤 Vue-meta

1. 瀹夎骞跺紩鍏?Vue-meta 鍚庯紝鍙互鍦?Vue 缁勪欢涓娇鐢ㄥ畠銆傝鍦ㄧ粍浠朵腑娣诲姞 meta 淇℃伅锛屽鏍囬銆佹弿杩扮瓑锛屽彲浠ュ湪缁勪欢鍐呭紩鐢紝鍦╫nMounted涓瀹氱浉鍏崇殑淇℃伅锛?/li>

<script setup>
    import {onMounted} from "vue";
	
	import { useMeta } from 'vue-meta';

    onMounted(() => {
      useMeta({
        title: '绗戝皬鏋煃?- 绋嬪簭鍛樼殑涓栧妗冩簮',
        meta: [
          { name: 'keywords', content: '绗戝皬鏋?java,SpringBoot,绋嬪簭鍛? },
          { name: 'description', content: '娆㈣繋鏉ュ埌绗戝皬鏋紝鎴戜滑鑷村姏浜庢墦閫犱竴涓紑鏀俱€佸弸濂界殑鎶€鏈ぞ鍖猴紝璁╃煡璇嗗拰鏅烘収鍦ㄨ繖閲岃嚜鐢辩鎾炪€佺唤鏀俱€傛杩庡姞鍏ユ垜浠殑鏃呯▼锛屼竴璧峰湪鎶€鏈殑娴锋磱涓帰绱㈡棤闄愬彲鑳斤紒' }
        ]
      });
    });
</script>

2. 涓婅堪浠ｇ爜涓紝鎴戜滑璁惧畾浜嗛〉闈㈢殑 title锛堟爣棰橈級涓?鈥淰ue-meta 绀轰緥鈥濓紝骞舵坊鍔犱簡涓や釜 meta 鏍囩锛歞escription锛堟弿杩帮級鍜?keywords锛堝叧閿瘝锛夈€傜粍浠舵覆鏌撴椂锛孷ue-meta 灏嗚嚜鍔ㄦ洿鏂拌繖浜?meta 淇℃伅銆?/li>

3.3 Vue-meta 鐨勯珮绾х敤娉?/h4>

1. Vue-meta 涓嶄粎鍙互璁剧疆 meta锛岃繕鏀寔璁剧疆鍏朵粬 HTML 鏍囩锛屽 link銆乻tyle銆乻cript 绛夈€備笅闈㈡槸涓€涓负椤甸潰娣诲姞鏍峰紡鍜岃剼鏈殑渚嬪瓙锛?/li>

<script setup>
    import {onMounted} from "vue";
	
	import { useMeta } from 'vue-meta';

    onMounted(() => {
      useMeta({
        title: '绗戝皬鏋煃?- 绋嬪簭鍛樼殑涓栧妗冩簮',
        meta: [
          { name: 'keywords', content: '绗戝皬鏋?java,SpringBoot,绋嬪簭鍛? },
          { name: 'description', content: '娆㈣繋鏉ュ埌绗戝皬鏋紝鎴戜滑鑷村姏浜庢墦閫犱竴涓紑鏀俱€佸弸濂界殑鎶€鏈ぞ鍖猴紝璁╃煡璇嗗拰鏅烘収鍦ㄨ繖閲岃嚜鐢辩鎾炪€佺唤鏀俱€傛杩庡姞鍏ユ垜浠殑鏃呯▼锛屼竴璧峰湪鎶€鏈殑娴锋磱涓帰绱㈡棤闄愬彲鑳斤紒' }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'
          }
        ],
        script: [
          {
            src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
            async: true,
            body: true,
          }
        ]
      });
    });
</script>

閫氳繃璇锋眰鍚庡彴鏁版嵁锛屾暟鎹姹傛垚鍔熷悗锛屽姩鎬佽缃甿eta灞炴€с€傛渶寮€濮嬫槸鏀惧湪onMounted涓紝鍥犱负鏁版嵁涔熸槸鏀惧湪onMounted涓紝鎰熻鏁版嵁娌℃湁璇锋眰瀹岋紝meta灏辨覆鏌撳畬浜嗭紝瀵艰嚧涓嶇敓鏁堬紝鏆傛椂涓嶇煡閬撴€庝箞瑙ｅ喅锛岃鎵撹鎾炰腑锛屽姩鎬佺殑椤甸潰浼氳Е鍙?code>onUpdated浜嬩欢锛屼簬鏄氨鍙栧阀鏀惧湪浜?code>onUpdated涓紝甯屾湜鐭ラ亾鍘熷洜鐨勫墠绔ぇ浣彲浠ョ粰浜堟寚瀵拣煓忦煓忦煓?/li>

鐪佺暐浜嗛潪鍏抽敭鎬т唬鐮侊紝姝ｅ父涓嶄細瑙﹀彂onUpdated锛岃繖閲岃鎵撹鎾炰簡鈥?/p>

涓嬭浇瀹夎鍖?/li>

wget https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.gz

3. 瑙ｅ帇瀹夎鍖?/li>

tar -xzvf node-v17.9.0-linux-x64.tar.gz

4. 璁剧疆杞繛鎺ワ紝寤虹珛蹇嵎鍛戒护

ln -s /opt/node-v17.9.0-linux-x64/bin/node /usr/local/bin/
ln -s /opt/node-v17.9.0-linux-x64/bin/npm /usr/local/bin/

5. 浣跨敤node -v鏌ョ湅鏄惁瀹夎鎴愬姛

瀹夎 puppeteer锛宔xpress 涓?html-minifier

npm install puppeteer --save
npm install express
npm install html-minifier

娉ㄦ剰锛氬洜涓簆uppeteer鏈€鏂扮増鏈彲鑳介渶瑕佺殑node鐗堟湰涓嶅悓锛屽彲浠ラ€氳繃package.json鎸囧畾puppeteer鐗堟湰 鏈枃浣跨敤鐨勭増鏈?/p>

{
  "dependencies": {
    "express": "^4.18.2",
    "html-minifier": "^4.0.0",
    "puppeteer": "19.8.0"
  }
}

3. 瀹夎渚濊禆搴?/li>

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86

4.3 鍒涘缓鏈嶅姟鍣ㄧ杩愯鑴氭湰

1. 鍒涘缓娓叉煋璇锋眰鐨勯〉闈㈣剼鏈細spider.js

const puppeteer = require('./node_modules/puppeteer');//鐢变簬鐩綍涓嶄竴鑷达紝鎵€浠ヤ娇鐢ㄧ殑鏄粷瀵硅矾寰?/span>
const WSE_LIST = require('./puppeteer-pool.js'); //杩欓噷娉ㄦ剰鏂囦欢鐨勮矾寰勫拰鏂囦欢鍚?/span>
const spider = async (url) => {
	let tmp = Math.floor(Math.random() * WSE_LIST.length);
	//闅忔満鑾峰彇娴忚鍣?/span>
	let browserWSEndpoint = WSE_LIST[tmp];
	//杩炴帴
	const browser = await puppeteer.connect({
		browserWSEndpoint
	});
	
	//鎵撳紑涓€涓爣绛鹃〉
	var page = await browser.newPage();
	
	// Intercept network requests.
	await page.setRequestInterception(true);

    page.on('request', req => {
      // Ignore requests for resources that don't produce DOM
      // (images, stylesheets, media).
      const whitelist = ['document', 'script', 'xhr', 'fetch'];
      if (!whitelist.includes(req.resourceType())) {
        return req.abort();
      }
      
      // Pass through all other requests.
      req.continue();
    });
	
	//鎵撳紑缃戦〉
	await page.goto(url, {
		timeout: 20000, //杩炴帴瓒呮椂鏃堕棿锛屽崟浣峬s
		waitUntil: 'networkidle0' //缃戠粶绌洪棽璇存槑宸插姞杞藉畬姣?/span>
	});
	
	//鑾峰彇娓叉煋濂界殑椤甸潰婧愮爜銆備笉寤鸿浣跨敤await page.content();鑾峰彇椤甸潰锛屽洜涓哄湪鎴戞祴璇曚腑鍙戠幇锛岄〉闈㈣繕娌℃湁瀹屽叏鍔犺浇銆傚氨鑾峰彇鍒颁簡銆傞〉闈㈡簮鐮佷笉瀹屾暣銆備篃灏辨槸鍔ㄦ€佽矾鐢辨病鏈夊姞杞姐€倂ue璺敱涔熼厤缃簡history妯″紡
	let html = await page.evaluate(() => {
		return document.getElementsByTagName('html')[0].outerHTML;
	});
	await page.close();
	return html;
}

module.exports = spider;

2. 鍒涘缓浼樺寲puppeteer鎬ц兘瑙掓湰锛岄粯璁や笉鍔犺浇涓€浜涘浣欑殑鍔熻兘锛屾彁楂樿闂晥鐜囷細puppeteer-pool.js

const puppeteer = require('./node_modules/puppeteer');
const MAX_WSE = 2; //鍚姩鍑犱釜娴忚鍣?
let WSE_LIST = []; //瀛樺偍browserWSEndpoint鍒楄〃
//璐熻浇鍧囪　
(async () => {
	for (var i = 0; i < MAX_WSE; i++) {
		const browser = await puppeteer.launch({
            //鏃犲ご妯″紡
			headless: true,
            //鍙傛暟
			args: [
				'--disable-gpu',
				'--disable-dev-shm-usage',
				'--disable-setuid-sandbox',
				'--no-first-run',
				'--no-sandbox',
				'--no-zygote',
				'--single-process'
			],
			//涓€鑸笉闇€瑕侀厤缃繖鏉★紝闄ら潪鍚姩涓€鐩存姤閿欐壘涓嶅埌璋锋瓕娴忚鍣?/span>
			//executablePath:'chrome.exe鍦ㄤ綘鏈満涓婄殑璺緞锛屼緥濡侰:/Program Files/Google/chrome.exe'
		});
		let browserWSEndpoint = await browser.wsEndpoint();
		WSE_LIST.push(browserWSEndpoint);
	}
})();

module.exports = WSE_LIST

3. 鍒涘缓鏈嶅姟绔惎鍔ㄨ剼鏈細service.js

闇€瑕佸拰spider.js鏀惧湪涓€涓洰褰?/p>

https://www.xiaoxiaofeng.com闇€瑕佹浛鎹㈡垚浣犺嚜宸辩殑鍩熷悕

const express = require('./node_modules/express');
var app = express();
var spider = require("./spider.js");
var minify = require('html-minifier').minify;
app.get('*', async (req, res) => {
	let url = "https://www.xiaoxiaofeng.com" + req.originalUrl;
	console.log('璇锋眰鐨勫畬鏁碪RL锛? + url);
	let content = await spider(url).catch((error) => {
		console.log(error);
		res.send('鑾峰彇html鍐呭澶辫触');
		return;
	});
	// 閫氳繃minify搴撳帇缂╀唬鐮?/span>
    content=minify(content,{removeComments: true,collapseWhitespace: true,minifyJS:true, minifyCSS:true});
	res.send(content);
});
app.listen(3000, () => {
	console.log('鏈嶅姟宸插惎鍔紒');
});

4. 鎵ц鍚姩puppeteer鍛戒护

nohup node server.js &

鍚姩鎴愬姛鍚庯紝鍙互閫氳繃tail -f nohup.out鏌ョ湅鏃ュ織锛屽嚭鐜?code>鏈嶅姟宸插惎鍔紒鍒欎唬琛ㄨ繍琛屾垚鍔燂紝鏈熼棿鍙兘浼氬嚭鐜板悇寮忓悇鏍风殑闂锛屽啀鐧惧害涓€涓嬪惂锛岃繖閲屽氨涓嶄竴涓€鍒椾妇浜嗐€?/p>

鐩稿綋涓庡惎鍔ㄤ簡涓€涓鍙ｄ负3000鐨刾uppeteer鏈嶅姟銆?/p>

鍚姩鐨勬椂鍊欏彲鑳界鍙ｅ崰鐢?3000琚崰鐢ㄧ殑璇濆氨鎹竴涓叾浠栫鍙ｃ€?/p>

鍚屾椂涔熶細鍦?root/.cache/puppeteer/chrome/涓嬭涓€涓搴旂増鏈殑璋锋瓕娴忚鍣?/p>

杩欐牱灏卞彲浠ヤ簡锛岃鎴戜滑涓€璧锋潵娴嬭瘯涓€涓嬪惂

棣栧厛鎴戜滑鍏堟甯哥殑璇锋眰锛屼笉鍔犺姹傚ご锛岃姹傜粨鏋滃涓嬶紝鍙互鐪嬪埌鏄病鏈夋覆鏌撶殑vue椤甸潰銆?/p>