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 중국어 웹사이트의 기타 관련 기사를 참조하세요!