Vue NUXT 기반 SSR 상세 설명
SSR
먼저 SSR,최근 핫 한 단어,서버 사 이 드 렌 더 링(서버 렌 더 링)을 의미 합 니 다.단일 페이지 애플 리 케 이 션 의 SEO 문 제 를 해결 하기 위해 서 입 니 다.일반 사이트 에 미 치 는 영향 은 크 지 않 지만 포럼 류,콘 텐 츠 류 사이트 에 있어 치 명 적 입 니 다.검색엔진 은 페이지 관련 내용 을 캡 처 할 수 없습니다.즉,사용자 가 이 사이트 의 관련 정 보 를 검색 할 수 없습니다.
페이지 를 캡 처 하 는 전 제 는 html 에 캡 처 된 내용 이 포함 되 어 있 습 니 다.vue 기반 온라인 SPA 페이지 요청 시 무엇 을 되 돌 렸 는 지 살 펴 보 세 요.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>iDareX </title>
<meta name=keywords content=" , iDareX, TV, , , , , , , , , , , , , , , , , , 90 ">
<meta name=description content= 2014 10 ， 。 、 、 ， ‘ ' ， 。!>
<meta name=renderer content=webkit>
<meta name=force-rendering content=webkit>
<meta name=viewport content="width=1140">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<link rel="shortcut icon" href=static/favicon.ico type=image/x-icon>
<link href=/static/css/app.eef5b81a3d1bee5054a791f452a34147.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.6d0adb8f2d8884be1c03.js></script>
<script type=text/javascript src=/static/js/vendor.ec1cc90c9847c434ba7d.js></script>
<script type=text/javascript src=/static/js/app.d7fd10ae7e4a68598037.js></script>
</body>
</html><div id=app></div>에 렌 더 링 한 것 입 니 다.SEO 결함 의 원인 을 합 리 적 으로 설명 한 것 이다.SSR 이 SEO 문 제 를 해결 할 수 있다 고 말 한 이상 원 리 는 우리 의 html 를 서버 에 렌 더 링 하고 완전한 html 파일 을 합성 하여 브 라 우 저 에 출력 하 는 것 이 라 고 생각 하기 어렵 지 않 습 니 다.
또한 SSR 은 다음 필드 에 도 적 용 됩 니 다.
이 그림 의 원리 에 대해 홈 페이지 에 상세 하 게 설명 되 어 있 으 며,이런 글 도 매우 많 으 니,여기 서 는 군말 하지 않 는 다.
NUXT
이제 본론 으로 들 어가 서 NUXT 를 말씀 드 리 겠 습 니 다.
Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by Next.js)
역할 은 node.js 에 한층 더 봉인 한 다음 에 우리 가 서버 환경 을 구축 하 는 절 차 를 줄 이 는 것 이다.이 라 이브 러 리 의 일부 규칙 만 따 르 면 SSR 을 쉽게 실현 할 수 있다.
설치 절차
Nuxt.js 팀 은 vue-cli 의 초기 화 템 플 릿 을 제공 합 니 다.vue-cli 를 설치 하고 설치 한 것 은 무시 합 니 다.
npm install -g vue-cli
vue init nuxt/starter <project-name>
cd <project-name>
npm install
npm run dev설명:Nuxt.js 는 디 렉 터 리 의 변경 사항 을 감청 합 니 다.새 페이지 를 추가 할 때 서 비 스 를 다시 시작 할 필요 가 없습니다.
디 렉 터 리 구조
위의 명령 을 완료 하면 디 렉 터 리 구 조 는 다음 과 같 습 니 다.
Nuxt.js 는 가장 간단 한 디 렉 터 리 구 조 를 보 여 주 었 습 니 다.
|-- pages
|-- index.vue
|-- package.json파일 의 경 로 는 절대 경 로 를 사용 하 는 것 을 권장 합 니 다.표 는 다음 과 같 습 니 다.
예:폴 더 에 있 는 그림 을 어떻게
pages도입 합 니까?
<img src="~static/img/logo.png" alt="Logo"/>Nuxt.js 는 pages 디 렉 터 리 구조 에 따라 vue-router 설정 을 생 성 합 니 다.즉,pages 디 렉 터 리 의 구 조 는 경로 구조 에 직접적인 영향 을 줍 니 다.
예 1:
|-- pages
|-- posts
|-- index.vue
|-- welcome.vue
|-- about.vue
|-- index.vue
routes: [
{
path: '/posts',
component: '~pages/posts/index.vue'
}, {
path: '/posts/welcome',
component: '~pages/posts/welcome.vue'
}, {
path: '/about',
component: '~pages/about.vue'
}, {
path: '/',
component: '~pages/index.vue'
}
]파일 이름 앞 에 추가
/pages/user/me.vue
|-- pages
|-- _about.vue
|-- index.vue
routes: [
{
path: '/',
component: '~pages/index.vue'
}
]디 렉 터 리 아래
static는 우리 의 유일한 설정 입구 입 니 다.특별한 수요 가 없 는 한 디 렉 터 리 를 수정 하 는 것 을 권장 하지 않 습 니 다_.기본 적 인 기 똥 차 는 세 가지 설정.head.css.loading.각각 머리 설정,전역 css,loading 진도 바 입 니 다.
nuxt.config.js 의 모든 설정 은 다음 과 같 습 니 다.구체 적 인 예 를 보 려 면 누 르 십시오.
NUXT 가 뭘 해 줄 수 있 을 까?
사용 에 대해 서 는 위 에 이렇게 많아 요.
문제 1:우 리 는 경로 구분 을 위해 고민 할 필요 가 없다 는 것 입 니 다.해당 하 는 폴 더 등급 에 따라'vue 파일'을 만 들 면 됩 니 다.
문제 2:데이터 전송 문 제 를 고려 할 필요 가 없습니다.nuxt 는 템 플 릿 출력 전에 비동기 요청 데이터(axios 라 이브 러 리 도입 필요)를 사용 하고 vuex 에 대한 추가 패키지 가 있 습 니 다.
문제 3:웹 팩 이 내장 되 어 있 습 니 다.웹 팩 을 설정 하 는 절 차 를 생략 하고 nuxt 는 설정 에 따라 해당 하 는 파일 을 포장 합 니 다.
아직도 편리 한 점 이 많 으 니,써 보고,원본 코드 를 읽 어 볼 수 있다.
총결산
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
