分类
vue

9、vue实现服务端渲染

1.新建webpack.config.server.js

const path = require(‘path’)
const ExtractPlugin = require(‘extract-text-webpack-plugin’)
const webpack = require(‘webpack’)
const merge = require(‘webpack-merge’)
const baseConfig = require(‘./webpack.config.base’)
// 服务端渲染的最重要的插件 vue-server-renderer
// npm i vue-server-renderer@2.5.13 -S
const VueServerPlugin = require(‘vue-server-renderer/server-plugin’)
let config

config = merge(baseConfig, {
  target: ‘node’,
  entry: path.join(__dirname, ‘../client/server-entry.js’),
  devtool: ‘source-map’,
  output: {
    // commonjs2打包出的入口是module.exports
    libraryTarget: ‘commonjs2’,
    filename: ‘server-entry.js’,
    path: path.join(__dirname, ‘../server-build’)
  },
  // 不要打包第二份
  externals: Object.keys(require(‘../package.json’).dependencies),
  module: {
    rules: [
      {
        test: /\.styl/,
        use: ExtractPlugin.extract({
          fallback: ‘vue-style-loader’,
          use: [
            ‘css-loader’,
            {
              loader: ‘postcss-loader’,
              options: {
                sourceMap: true,
              }
            },
            ‘stylus-loader’
          ]
        })
      }
    ]
  },
  plugins: ([
    new ExtractPlugin(‘styles.[contentHash:8].css’),
    new webpack.DefinePlugin({
      ‘process.env.NODE_ENV’: JSON.stringify(process.env.NODE_ENV || ‘development’),
      ‘process.env.VUE_ENV’: ‘”server”‘
    }),
    new VueServerPlugin()
  ])
})

module.exports = config

2.安装koa

3.新建server/server.js文件

const Koa = require(‘koa’)

const app = new Koa()

const isDev = process.env.NODE_ENV === ‘development’

app.use(async (ctx, next) => {
  try {
    console.log(`with path ${ctx.path}`)
    await next()
  } catch (error) {
    console.log(error)
    ctx.status = 500
    if (isDev) {
      ctx.body = error.message
    } else {
      ctx.body = ‘please try again later’
    }
  }
})

  • 安装koa-router -S 处理koa路由
  • 安装axios -S 处理请求
  • 安装memory-fs -D
  • 安装ejs -S
  • 安装 koa-send -S

安装nodemon -D 修改服务端渲染代码保存时自动重启npm

在server/ 下新建nodemon.json
{
  “restartable”: “rs”,
  “ignore”: [
    “.git”,
    “node_moudules/**/node_modules”,
    “.eslintrc”,
    “client”,
    “build/webpack.config.client.js”,
    “public”
  ],
  “verbose”: true,
  “env”: {
    “NODE_ENV”: “development”
  },
  “ext”: “js json ejs”
}

安装concurrently -D 启动两个npm服务

在package.json 添加指令  “scripts”:
“dev”: “concurrently \”npm run dev:client\” \”npm run dev:server\””

安装vue-meta -S 处理元信息(SEO)

在app页面引入vue-meta,并Vue.use(Meta)
然后在vue页面
metaInfo: {
    title: ‘sunqiayin’
  },

热更新跨域解决办法

在webpack.config.client.js中加上
headers: { ‘Access-Control-Allow-Origin’: ‘*’ },

发表评论

电子邮件地址不会被公开。 必填项已用*标注