从0到1构建vueSSR项目之node以及vue-cli3的配置

我来详细讲解一下“从0到1构建Vue SSR项目之Node以及Vue CLI3的配置”这个话题。

总体流程

从0到1构建Vue SSR项目，其总体流程如下：

初始化项目
安装必要的依赖
配置webpack
配置Vue SSR
编写Vue SSR相关代码
启动项目

接下来，我将逐步详细讲解这个过程。

初始化项目

首先，我们需要使用Vue CLI 3进行项目初始化，这个过程非常简单，只需要执行以下命令：

vue create my-vue-ssr-project

其中，my-vue-ssr-project为项目名称，可以根据实际情况进行修改。在初始化项目的过程中，我们需要选择一些配置，这里推荐选择Manually select features，然后按照需要来选择所需的功能。

安装必要的依赖

在项目初始化完成之后，我们需要安装一些必要的依赖，具体依赖如下：

vue-server-renderer
express
webpack-node-externals
lodash

其中，vue-server-renderer是用于Vue SSR的核心依赖；express是一个常用的Node.js web框架；webpack-node-externals是用于排除Node.js中不需要webpack处理的模块；lodash是一个JavaScript实用库，提供了很多常用的函数和工具。

在安装这些依赖之前，需要先切换到项目的根目录下：

cd my-vue-ssr-project

然后执行以下命令来安装这些依赖：

npm install vue-server-renderer express webpack-node-externals lodash

配置webpack

接下来，我们需要对webpack进行一些配置，以使其能够正确地打包Vue SSR应用程序。这里，我们需要创建一个专门用于SSR的webpack配置文件，命名为webpack.server.js。

下面是一个示例webpack配置文件，用于打包Vue SSR应用程序：

const path = require('path')
const webpackNodeExternals = require('webpack-node-externals')

module.exports = {
  target: 'node',
  entry: './src/entry-server.js',
  output: {
    filename: 'server-bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      }
    ]
  },
  externals: webpackNodeExternals({
    whitelist: [/\.css$/]
  })
}

在这个示例webpack配置中，主要包含以下几个部分：

target：指定编译目标为node，以使webpack能够正确地编译Node.js代码。
entry：指定入口文件为./src/entry-server.js，这个文件将处理所有SSR相关逻辑。
output：指定输出配置，包括打包后文件名、输出目录以及库类型。
module：配置webpack加载器，以支持Vue文件和JSX语法。
externals：排除Node.js中不需要webpack处理的模块。

配置Vue SSR

在webpack配置完成之后，我们需要对Vue SSR进行一些配置，以便在Node.js环境中正确地运行。

首先，我们需要创建一个专门处理SSR的文件，命名为entry-server.js。这个文件的主要作用是对Vue应用程序进行服务端渲染，并输出HTML字符串。

接下来是一个示例文件，用于处理Vue SSR相关逻辑：

import { createApp } from './app'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp()

    router.push(context.url)

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()

      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      Promise.all(matchedComponents.map(component => {
        if (component.asyncData) {
          return component.asyncData({
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

在这个示例代码中，我们主要执行以下几个关键步骤：

创建Vue应用程序实例
根据请求的URL，设置Vue路由实例的当前路由
等待所有异步数据获取完毕，确保状态已经渲染到应用程序中
最后返回Vue应用程序实例

编写Vue SSR相关代码

在对Vue SSR进行配置之后，我们需要编写Vue SSR代码，以便在Node.js环境中正确地运行起来。

首先，我们需要修改Vue应用程序入口文件src/main.js，以便它能够正确地在浏览器和Node.js环境中运行。具体的修改如下：

import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'

// 导出一个工厂函数，用于创建新的应用程序、路由和存储实例
export function createApp () {
  const router = createRouter()

  const app = new Vue({
    router,
    render: h => h(App)
  })

  return { app, router }
}

在这个修改之后，我们的Vue应用程序就已经能够支持SSR了。

接下来，我们需要创建一个专门用于处理SSR请求的文件，命名为server.js。

const express = require('express')
const fs = require('fs')
const path = require('path')
const bodyParser = require('body-parser')
const { createBundleRenderer } = require('vue-server-renderer')
const serverBundle = require('./dist/server-bundle.json')
const template = fs.readFileSync('./public/index.html', 'utf-8')
const port = process.env.PORT || 3000

const app = express()
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template: template,
  clientManifest: null
})

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.use(express.static(path.join(__dirname, 'dist')))

app.get('*', (req, res) => {
  const context = {
    url: req.url,
    title: 'Vue SSR Boilerplate'
  }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      res.status(500).send('Internal Server Error')
    } else {
      const outputHtml = template
        .replace(`<div id="app"></div>`, `<div id="app">${html}</div>`)
        .replace(`Vue SSR Boilerplate`, context.title)
      res.setHeader('Content-Type', 'text/html')
      res.send(outputHtml)
    }
  })
})

app.listen(port, () => {
  console.log(`server started at localhost:${port}`)
})

在这个文件中，我们主要执行以下几个关键步骤：

首先，我们导入必要的依赖，包括express、fs和path等。
然后，我们使用vue-server-renderer的createBundleRenderer函数创建一个渲染器，加载上一步中打包生成的server-bundle.js文件。
为了支持动态路由，我们需要创建一个路由捆绑的上下文(context object)。
最后，使用express作为服务器，处理所有的SSR请求，并将SSR渲染后的结果输出发给客户端。