[JavaScript知识库]SSR服务端渲染 轻便型

ssr

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

SSR服务端渲染 轻便型

主要内容：

vue服务端渲染

安装vue cli3

1、首先卸载旧版本（如果事先安装了vue cli1.x或者vue cli2.x，要先卸载掉）

npm uninstall vue-cli -g

2、安装Vue cli

npm install -g @vue/cli

3、安装Vue2.xx

vue create demo 选择2.x

4、安装 express、vue-server-renderer

npm install express vue-server-renderer

5、和src同级目录创建 server目录，在server里面新建index.js文件

//nodejs服务器
const express = require('express');
const Vue = require('vue');
// 创建express实例和vue实例
const app = express();
// 创建渲染器
const renderer = require('vue-server-renderer').createRenderer();

// 将来用渲染器 渲染page可以得到html内容
const page = new Vue({
    data: { title: '渲染吧' },
    template: `
    <div class="">hello,vue ssr! <hr>
    <h1>{{title}}</h1>
    </div> `
});

app.get('/', async (req, res) => {
    try {
        const html = await renderer.renderToString(page);
        console.log(html);
        res.send(html);
    } catch (e) {
        res.status(500).send(e.message)
    }
})

app.listen(3300, () => {
    console.log('渲染服务器启动成功');
})

6、在server目录下 启动node服务器

执行命令node ./index.js，
然后在 浏览器地址栏输入 http://localhost:3300/

项目目录结构

server/index.js 最主要，其他的次要

|-- demo
    |-- .browserslistrc
    |-- .eslintrc.js
    |-- .gitignore
    |-- babel.config.js
    |-- package.json
    |-- README.md
    |-- yarn-error.log
    |-- yarn.lock
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- server   // 最主要
    |   |-- index.js   // 最主要
    |-- src
        |-- App.vue
        |-- main.js
        |-- assets
        |   |-- logo.png
        |-- components
        |   |-- HelloWorld.vue
        |-- router
        |   |-- index.js
        |-- store
        |   |-- index.js
        |-- views
            |-- About.vue
            |-- Home.vue