Vue 프레임워크는 매우 인기 있는 JavaScript 프런트 엔드 프레임워크로 Evan You가 개발한 프레임워크로 보다 부드럽고 효율적인 MVVM 패턴을 이해하는 데 중점을 둡니다. 이 기능의 출현으로 프런트엔드 개발자는 우수한 사용자 경험을 갖춘 웹 애플리케이션을 보다 쉽게 개발할 수 있습니다. 이 기사에서는 독자가 프레임워크의 사용 기술을 더 잘 익힐 수 있도록 Vue 프레임워크의 서버 및 클라이언트 배포 방법을 소개합니다.
1. 클라이언트 배포
Vue 프레임워크의 클라이언트 배포는 비교적 간단합니다. 일반적으로 사용되는 두 가지 도입 방법은 다음과 같습니다.
Vue의 공식 CDN 주소를 직접 사용하여 HTML 파일에 Vue.js 파일을 도입할 수 있습니다. 예:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. 가져올 소스 파일 다운로드:
Vue의 소스 코드를 직접 다운로드할 수도 있고, 그런 다음 HTML 파일에 해당 파일을 삽입합니다. 예를 들면 다음과 같습니다.
<script src="./path/to/vue.js"></script>
가 도입된 후 Vue 프레임워크를 직접 사용할 수 있습니다.
2. 서버측 배포
Vue 프레임워크를 서버측에 배포하기 전에 먼저 관련 Node.js 환경을 설치해야 합니다. Node.js 환경이 준비되면 Vue 서버 측 렌더링 개발을 시작할 수 있습니다.
1. 프로젝트 생성 및 구성
프로젝트를 생성한 후 package.json 파일에 관련 종속성을 도입해야 합니다. Vue 및 Vue 서버 렌더링과 관련된 종속성은 다음과 같습니다.
{
"dependencies": {
"vue": "^2.5.0",
"vue-server-renderer": "^2.5.0"
}
}2.서버 측 코드 작성package.json 文件中引入相关的依赖，其中Vue与Vue服务器渲染相关的依赖如下：
const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
const app = express()
app.get('*', (req, res) => {
const vm = new Vue({
template: '<div>Hello {{ name }}</div>',
data: {
name: 'Vue SSR'
}
})
renderer.renderToString(vm, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`Server started at localhost:${port}`)
})2.服务器端代码编写
接下来需要编写服务器端代码，在Node.js中使用 express 框架进行项目搭建，然后在项目中加入Vue服务器渲染中间件。例如：
module.exports = {
// ... 其他配置
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}以上代码简单地实现了Vue SSR的基本功能，服务器启动后，访问页面时将返回Vue组件渲染后的页面内容。
可以看到，在代码中使用 vue-server-renderer 中的 createRenderer() 方法，创建了一个renderer对象，并将该对象作为模板参数传递给了 renderToString() 方法，负责将Vue组件渲染成HTML字符串，并将结果返回给前端页面。
3.配置Webpack
在项目中使用了Webpack，需要在Webpack配置文件中设置Vue文件的编译规则，例如：
const Vue = require('vue')
const express = require('express')
const renderer = require('vue-server-renderer').createRenderer()
const app = express()
app.get('*', (req, res) => {
const vm = new Vue({
template: `<div>Hello {{ name }}！</div>`,
data: {
name: 'Vue SSR'
}
})
renderer.renderToString(vm, (err, html) => {
if (err) {
return res.status(500).end('Internal Server Error')
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>${html}</body>
</html>
`)
})
})
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`Server started at localhost:${port}`)
})以上代码中使用了 vue-loader来Webpack处理 .vue 文件，主要是将 .vue 类型文件转换为可运行的 js 代码。
4.服务端渲染路由配置
在使用Vue SSR时，需要在项目中进行路由配置，以便正确地渲染路由请求的内容。例如：
rrreee以上代码使用了 express
express 프레임워크를 사용하여 프로젝트를 빌드한 다음 Vue 서버 렌더링 미들웨어를 추가해야 합니다. 프로젝트. 예: rrreee
위 코드는 단순히 Vue SSR의 기본 기능을 구현한 것입니다. 서버가 시작된 후 페이지에 액세스하면 Vue 구성 요소에서 렌더링한 페이지 콘텐츠가 반환됩니다.vue-server-renderer의 createRenderer() 메서드가 코드에서 렌더러 객체를 생성하고 해당 객체를 템플릿 매개변수로 전달하는 데 사용되는 것을 볼 수 있습니다. Vue 구성 요소를 HTML 문자열로 렌더링하고 결과를 프런트 엔드 페이지에 반환하는 renderToString() 메서드가 제공됩니다. 🎜🎜3. Webpack 구성🎜🎜프로젝트에서 Webpack을 사용하는 경우 Webpack 구성 파일에서 Vue 파일의 컴파일 규칙을 설정해야 합니다. 예: 🎜rrreee🎜위 코드는 vue-loader를 Webpack으로 처리 <code>.vue 파일은 주로 .vue 유형 파일을 실행 가능한 js 코드로 변환합니다. 🎜🎜4. 서버 측 렌더링 라우팅 구성🎜🎜Vue SSR을 사용할 때 라우팅 요청 내용을 올바르게 렌더링하려면 프로젝트에서 라우팅 구성을 수행해야 합니다. 예: 🎜rrreee🎜위 코드는 express 프레임워크를 사용하여 라우팅을 구성하고, 라우팅 요청을 판단한 후 전체 페이지를 렌더링하고 이를 브라우저에 반환합니다. 🎜🎜요약🎜🎜이 글에서는 Vue 서버와 클라이언트의 기본적인 배포 방법을 간략하게 소개합니다. 프로젝트를 개발할 때 적절한 배포 방법을 선택해야 합니다. 정적 페이지만 표시해야 하는 프로젝트의 경우 클라이언트 배포 방법을 사용하세요. 데이터의 동적 표시 또는 SEO 개선이 필요한 프로젝트의 경우 서버 측 렌더링 배포를 사용하는 것이 좋습니다. 이 기사가 독자들에게 도움이 되고 Vue 프레임워크 사용 기술을 더 잘 익힐 수 있기를 바랍니다. 🎜위 내용은 Vue 프레임워크의 서버 및 클라이언트 배포 방법에 대해 이야기해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
