vue-cli 단일 페이지 미리 렌 더 링 seo-prerender-spa-plugin 작업
사용 방법:
vue add prerender-spa
설치 과정 에서 chrome 을 설치 해 야 합 니 다.네트워크 속도 가 좋 지 않 으 면 다운로드 할 수 없고 설치 에 실패 할 수 있 습 니 다.chrome 의 설 치 를 취소 한 다음 에 수 동 으로 다운로드 하여 지정 한 디 렉 터 리 에 놓 을 수 있 습 니 다.
설치 과정 에서 미리 렌 더 링 할 route 를 선택 하 십시오.
설치 성공:
자동 으로 main.js 에 가입:
2 prerender-spa-plugin 플러그 인 사용
cnpm i prerender-spa-plugin --save-dev
vue-cli 2.0 build/webpack.prod.conf.js 에서:
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
등록 플러그 인:
plugins 에 가입:
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, '../dist'),// ，
routes: ['/test', '/'],// route
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: true,
renderAfterDocumentEvent: 'render-event'// Vue ，
})
})vue.config.js 에서
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// ， webpakc 。
// ！！！
// ， ， ， 。
staticDir: path.join(__dirname,'dist'),
// ， a ， /a/param1。
routes: ['/', '/product','/about'],
// ， ，
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// main.js document.dispatchEvent(new Event('render-event'))， 。
renderAfterDocumentEvent: 'render-event'
})
}),
],
};
}
}
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
mounted() {
// You'll need this for renderAfterDocumentEvent.
document.dispatchEvent(new Event('render-event'))
}
})이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue.js】Xserver에 Vue CLI로 만든 초간이 페이지를 배포해 보았다.Vue CLI를 사용한 포트폴리오 제작은 처음이었기 때문에, 일단 제작에 착수하기 전에 배포가 가능한지 시도해 보았습니다. (모처럼 만들었는데 배포할 수 없다니 된다면 너무 슬프니까...웃음) 결론, 비교적 간단하게...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
