vuecli 프로젝트 구축 SSR 서버 렌 더 링 실현
Vue 구성 요 소 를 서버 에 HTML 문자열 로 렌 더 링 하여 브 라 우 저 에 보 냅 니 다.마지막 으로 이 정적 표 시 를 대화 식 프로그램 으로 활성화 하 는 과정 을 서버 렌 더 링(SSR)이 라 고 합 니 다.
서버 가 렌 더 링 한 Vue.js 응용 프로그램 도'동 구성'또는'통용'으로 여 겨 질 수 있 습 니 다.응용 프로그램의 대부분 코드 가 서버 와 클 라 이언 트 에서 실 행 될 수 있 기 때 문 입 니 다.
서버 렌 더 링 사용 이유(SSR)
소수의 마 케 팅 페이지(예 를 들 어/,/about,/contact 등)의 SEO 를 개선 하려 면 미리 렌 더 링 이 필요 할 수 있 습 니 다.웹 서버 를 사용 하여 실시 간 으로 HTML 을 동적 으로 컴 파일 하지 않 고 미리 렌 더 링 방식 을 사용 하여 구축 할 때 특정한 경로 에 대한 정적 HTML 파일 을 간단하게 생 성 할 수 있 습 니 다.미리 렌 더 링 을 설정 하 는 것 이 더 간단 하 다 는 장점 이 있 습 니 다.그리고 전단 을 완전히 정적 인 사이트 로 사용 할 수 있 습 니 다.
웹 팩 을 사용 하면
prerender-spa-pluginnpm 주소플러그 인 을 사용 하여 미리 렌 더 링 을 쉽게 추가 할 수 있 습 니 다.서버 렌 더 링(SSR)원리
구축 절차:모든 파일 은 하나의 공공 입구
app.js를 가지 고 서버 입구entry-server.js와 클 라 이언 트 입구entry-client.js에 들 어 갑 니 다.프로젝트 가 완료 되면 웹 팩 포장 을 통 해 서버server bundle(서버 SSR 에 사용 되 는 json 파일)와 클 라 이언 트client bundle(브 라 우 저 에 사용)를 생 성 합 니 다.요청 페이지 에서서버 에서 vue 구성 요 소 를 HTML 문자열 로 조립 하여 브 라 우 저 에 보 내 고 클 라 이언 트 가 방문 한 HTML 템 플 릿 에 섞 어 페이지 렌 더 링 을 완성 합 니 다.
vuecli 를 통 해 vue 프로젝트 만 들 기
vue create vue-ssr-demo
vue-server-renderer vue-server-renderer는 SSR 렌 더 링 의 핵심 으로createRenderer방법 을 제공 합 니 다.이 방법renderToString은 app 을 문자열 로 렌 더 링 할 수 있 습 니 다.createBundleRenderer방법 은 패키지 프로그램 코드 를 통 해 bundleRenderer 인 스 턴 스 를 만 들 고 bundle 과 HTML 템 플 릿 을 렌 더 링 할 수 있 습 니 다.vue-server-render 설치
npm install vue-server-renderer --save
Node.js 서버 는 장기 적 으로 실행 되 는 프로 세 스 입 니 다.코드 가 이 프로 세 스에 들 어 갈 때 한 번 의 값 을 추출 하여 메모리 에 저장 합 니 다.이 는 단일 대상 을 만 들 면 들 어 오 는 요청 마다 공유 되 는 것 을 의미 합 니 다.따라서 반복 적 으로 실행 할 수 있 는 공장 함 수 를 노출 하여 모든 요청 에 새로운 루트 Vue 인 스 턴 스 를 만들어 야 합 니 다.여러 요청 사이 에 공 유 된 인 스 턴 스 를 사용 하면 교차 요청 상태 가 오염 되 기 쉽 습 니 다(같은 규칙 은 router,store,event bus 인 스 턴 스 에 도 적 용 됩 니 다)
라 우 터 생 성
vue-router 설치
npm install vue-router --savesrc디 렉 터 리 에 폴 더 와router만 들 기components 디 렉 터 리 에 Home.vue 와 About.vue 페이지 만 들 기(프로젝트 수요 에 따라 사용자 정의 생 성)
router/index.js：
import Vue from "vue"
import Router from "vue-router"
import Home from "@/components/Home"
import About from "@/components/About"
Vue.use(Router)
// router
// createRouter
export default function createRouter() {
// router
return new Router({
mode: "history",
routes: [
{
path: "/",
name: 'home',
component: Home
},
{
path: "/about",
name: 'about',
component: About
}
]
})
}
App.vue 페이지 를 수정 하여 페이지 레이아웃 을 진행 합 니 다(프로젝트 수요 에 따라 레이아웃 을 사용자 정의 합 니 다)
App.vue：
<template>
<div id="app">
<nav>
<router-link to="/"> </router-link>
<router-link to="/about"> </router-link>
</nav>
<router-view></router-view>
</div>
</template>index.js디 렉 터 리 에 공공 입 구 를 만 듭 니 다src.vue 인 스 턴 스 를 만 드 는 데 사 용 됩 니 다.app.js：
import Vue from "vue"
import App from "./App.vue"
import createRouter from "./router"
// createApp
export default function createApp() {
const router = createRouter()
// vue
const app = new Vue({
router,
render: h => h(App),
})
return { app, router }
}
app.js디 렉 터 리 에 서버 입구 만 들 기src,첫 화면 렌 더 링 에 사용entry-server.js：
import createApp from "./app"
export default context => {
return new Promise((resolve, reject) => {
const { app, router } = createApp()
//
router.push(context.url)
router.onReady(() => {
resolve(app)
}, reject)
})
}
entry-server.js디 렉 터 리 에 클 라 이언 트 입구 만 들 기src,활성화 app 마 운 트 에 사용entry-client.js：
import createApp from "./app"
const { app, router } = createApp()
router.onReady(() => {
// app
app.$mount("#app")
})
entry-client.js디 렉 터 리 에 생 성public,렌 더 링 Vue 프로그램 으로 사용 할 때 render 는 HTML 페이지 패키지 용 기 를 생 성하 여 생 성 된 HTML 표 시 를 패키지 합 니 다.index.temp.html주석 은 응용 프로그램 HTML 태그 가 주 입 된 곳 입 니 다.index.temp.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue ssr</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
서버 렌 더 링(SSR)은 Node.js 서버 를 사용 해 야 합 니 다.여 기 는
<!--vue-ssr-outlet-->프레임 워 크 를 사용 하여 구축 합 니 다.express 설치
npm install express --save
express파일 을 만 들 고 Node.js 서버 를 구축 하 는 데 사용 합 니 다.server.js：
//nodejs
const express = require("express")
const Vue = require("vue")
const fs = require("fs")
// express
const app = express()
//
const { createBundleRenderer } = require("vue-server-renderer")
const serverBundle = require("./dist/server/vue-ssr-server-bundle.json")
const clientManifest = require("./dist/client/vue-ssr-client-manifest.json")
const renderer = createBundleRenderer(serverBundle, {
runInNewContext: false,
template: fs.readFileSync("./public/index.temp.html", "utf-8"), //
clientManifest
})
//
app.use(express.static("./dist/client", {index: false}))
// vue
app.get("*", async (req, res) => {
try {
const context = {
url: req.url,
title: ""
}
const html = await renderer.renderToString(context)
res.send(html)
}catch {
res.status(500).send(" ！")
}
})
app.listen(9999, () => {
console.log(" ！")
})
루트 디 렉 터 리 에서 vue 프로필
server.js을 만 들 고 웹 팩 설정 을 합 니 다.이 설정 은 vue-cli 에서 웹 팩 의 기본 설정 을 덮어 씁 니 다.vue.config.js：
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin")
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin")
// ，
const TARGRT_NODE = process.env.WEBPACK_TARGET === "node"
const target = TARGRT_NODE ? "server" : "client"
module.exports = {
css: {
extract: false
},
outputDir: "./dist/" + target,
configureWebpack: () => ({
// entry server entry
entry: `./src/entry-${target}.js`,
// bundle renderer source map
devtool: "source-map",
// webpack Node (Node-appropriate fashion) (dynamic import)
// Vue ， `vue-loader` (server-oriented code)
target: TARGRT_NODE ? "node" : "web",
node: TARGRT_NODE ? undefined : false,
output: {
// server bundle Node (Node-style exports)
libraryTarget: TARGRT_NODE ? "commonjs2" : undefined
},
optimization: { splitChunks: TARGRT_NODE ? false : undefined },
// JOSN
// vue-ssr-server-bundle.json
plugins: [TARGRT_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
})
}
vue.config.js플러그 인:크로스 플랫폼 설정 과 환경 변 수 를 사용 하 는 스 크 립 트 를 실행 합 니 다.cross-env 플러그 인 설치
npm install cross-env --save
cross-env파일 에서 프로젝트 실행 패키지 스 크 립 트 를 정의 합 니 다.package.json：
{
......
"scripts": {
"server": "node server",
"build:client": "vue-cli-service build",
"build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server",
"build": "npm run build:server && npm run build:client"
},
......
}
npm run build
npm run server웹 페이지 소스 코드 를 보 니 루트 요소 에 특수 한 속성 이 추가 되 었 습 니 다.
package.json이 속성 은 클 라 이언 트 Vue 에 게 이 부분의 HTML 이 Vue 가 서버 에서 렌 더 링 되 었 음 을 알 리 고 활성화 모드 로 마 운 트 해 야 합 니 다.
<div id="app" data-server-rendered="true">......</div>
프로젝트 디 렉 터 리:
포장 후 dist 디 렉 터 리:
vuecli 프로젝트 구축 SSR 서버 렌 더 링 의 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vuecli 구축 SSR 서버 렌 더 링 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
vuecli 3 의 에이전트 가 만 나 는 구 덩이 를 설정 합 니 다.이 프 록 시 의 주요 기능 은 도 메 인 문 제 를 피 하 는 것 입 니 다. 여기 서 발생 하 는 크로스 필드 문 제 는 Axios 에 baseURL 을 설정 하기 때 문 일 수 있 습 니 다. proxy 는 당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
