Talk about server and client deployment methods in Vue framework-Front-end Q&A-php.cn

Talk about server and client deployment methods in Vue framework

PHPz

Release： 2023-04-17 11:18:27

Original

1192 people have browsed it

The Vue framework is an extremely popular JavaScript front-end framework. It is a framework developed by Evan You that focuses on understanding the smoother and more efficient MVVM pattern. Its emergence allows front-end developers to more easily develop web applications with a good user experience. This article will introduce the server and client deployment methods of the Vue framework to help readers better master the usage skills of the framework.

1. Client deployment

The client deployment of the Vue framework is relatively simple. You only need to introduce the framework file into the HTML file. There are two commonly used introduction methods:

1. Use CDN to import:

You can directly use Vue’s official CDN address to import the Vue.js file in the HTML file, for example:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Copy after login

2. Download the source file to import:

You can also directly download the source code of Vue, and then introduce the corresponding files in the HTML file, for example:

<script src="./path/to/vue.js"></script>

Copy after login

After the introduction, you can use the Vue framework directly.

2. Server-side deployment

Before deploying the Vue framework on the server-side, you need to install the relevant Node.js environment first. After the Node.js environment is ready, you can start developing Vue server-side rendering.

1. Project creation and configuration

After creating the project, you need to introduce relevant dependencies in the package.json file, among which Vue is related to Vue server rendering The dependencies are as follows:

{
  "dependencies": {
    "vue": "^2.5.0",
    "vue-server-renderer": "^2.5.0"
  }
}

Copy after login

2. Server-side code writing

Next, you need to write server-side code, use the express framework in Node.js to build the project, and then Add Vue server rendering middleware to the project. For example:

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}`)
})

Copy after login

The above code simply implements the basic functions of Vue SSR. After the server is started, the page content rendered by the Vue component will be returned when the page is accessed.

You can see that using the createRenderer() method in the code vue-server-renderer creates a renderer object and uses the object as a template The parameters are passed to the renderToString() method, which is responsible for rendering the Vue component into an HTML string and returning the result to the front-end page.

3. Configure Webpack

If you use Webpack in the project, you need to set the compilation rules of the Vue file in the Webpack configuration file, for example:

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

Copy after login

Used in the above code vue-loader comes to Webpack to process .vue files, mainly converting .vue type files into runnable js code.

4. Server-side rendering routing configuration

When using Vue SSR, routing configuration needs to be performed in the project in order to correctly render the content of the routing request. For example:

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}`)
})

Copy after login

The above code uses the express framework to configure routing, render the entire page after judging the routing request, and return it to the browser.

Summary

This article briefly introduces the basic deployment methods of Vue server and client. You need to choose the appropriate deployment method when developing projects. For projects that only need to display static pages, use the client deployment method. For projects that require dynamic display of data or SEO improvements, it is recommended to use server-side rendering deployment. I hope this article can be helpful to readers and allow you to better master the usage skills of the Vue framework.

The above is the detailed content of Talk about server and client deployment methods in Vue framework. For more information, please follow other related articles on the PHP Chinese website!