vue-cli2项目 添加 ssr 打包

要将vue-cli2项目添加ssr打包，需要进行以下步骤：

1. 首先，安装相应的依赖包。在项目根目录下运行以下命令：

npm install vue-server-renderer --save
npm install webpack-node-externals --save-dev

这样可以安装vue-server-renderer和webpack-node-externals两个依赖包。

2. 创建一个新文件，用于处理服务器端渲染。在项目根目录下创建一个`build`文件夹，并在其中创建一个名为`webpack.server.config.js`的文件。在该文件中，添加以下内容：

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

module.exports = {
  target: 'node',
  entry: './src/server.js',  // 根据实际文件名修改
  output: {
    filename: 'server.bundle.js',
    path: path.join(__dirname, '../dist'),
    libraryTarget: 'commonjs2'
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

3. 修改package.json文件，添加相应的脚本。在`scripts`字段中添加以下内容：

"scripts": {
  "build:server": "webpack --config build/webpack.server.config.js",
  "build": "npm run build:server && npm run build:client",
  "build:client": "vue-cli-service build"
}

这样可以添加三个命令：`build:server`用于构建服务器端渲染文件，`build:client`用于构建客户端文件，`build`用于同时构建服务器端和客户端文件。

4. 创建一个服务器端入口文件。在`src`文件夹下创建一个名为`server.js`的文件，并在其中添加以下内容：

const fs = require('fs')
const path = require('path')
const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')

const server = express()

const template = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
const serverBundle = require('./dist/server.bundle')

const renderer = createBundleRenderer(serverBundle, {
  template,
  runInNewContext: false
})

server.use(express.static(path.resolve(__dirname, '../dist')))

server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      res.status(500).end('Server error')
      return
    }
    res.end(html)
  })
})

server.listen(3000, () => {
  console.log('Server started at http://localhost:3000')
})

在这个文件中，首先引入所需的模块。然后，使用`createBundleRenderer`方法创建bundle渲染器，并传入相关参数。接着，设置静态文件目录，并处理所有请求，将渲染好的HTML返回给客户端。

5. 最后，运行`npm run build`命令进行打包。打包完成后，可以运行`node dist/server.bundle.js`启动服务器端。

至此，我们成功将vue-cli2项目添加了ssr打包。