>  기사  >  웹 프론트엔드  >  Vue 프레임워크의 서버 및 클라이언트 배포 방법에 대해 이야기해 보세요.

Vue 프레임워크의 서버 및 클라이언트 배포 방법에 대해 이야기해 보세요.

PHPz
PHPz원래의
2023-04-17 10:30:021169검색

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

다음으로 서버 측 코드를 작성하고 Node.js의 express 프레임워크를 사용하여 프로젝트를 빌드한 다음 Vue 서버 렌더링 미들웨어를 추가해야 합니다. 프로젝트. 예:

rrreee

위 코드는 단순히 Vue SSR의 기본 기능을 구현한 것입니다. 서버가 시작된 후 페이지에 액세스하면 Vue 구성 요소에서 렌더링한 페이지 콘텐츠가 반환됩니다.

vue-server-renderercreateRenderer() 메서드가 코드에서 렌더러 객체를 생성하고 해당 객체를 템플릿 매개변수로 전달하는 데 사용되는 것을 볼 수 있습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.