1

Vue提供了一个HackerNews示例来演示如何进行服务器端渲染以及热模块重新加载支持。

基本上，客户端和服务器端代码被分成两个文件：编译成两个 json 文件entry-client.js和entry-server.js. 然后为每个编写两个 webpack 配置，并将它们编译成 JSON 文件。

然后，有用于处理两个 JSON 并提供内容的server.js服务器vue-server-renderer。

至于热模块重新加载，文件夹中有一个名为 setup-dev-server.js 的配置，用于build处理任务并将编译的内容存储在webpack-dev-middleware的文件系统中。

只要您只更改及其关联的模块，此设置就可以完美entry-client.js运行entry-server.js。但是，我想要做的是添加一个仅server.js与热模块重新加载支持一起使用的新模块。

一个例子是添加一个 RESTful API entry-api.js，：

export function apiRoutes(app) {
  app.get('/hihi', (req, res, next) => {
    res.send(JSON.stringify({ status: 'hmr hi hitest success' }));
  });
  app.get('/byebye', (req, res, next) => {
    res.send(JSON.stringify({ status: 'hmr bye byetest success' }));
  });
}

并在server.js：

const isProd = process.env.NODE_ENV === 'production'
// ...
const app = express()

// ...
if (isProd) {
  const template = fs.readFileSync(templatePath, 'utf-8')
  const bundle = require('./dist/vue-ssr-server-bundle.json')
  const clientManifest = require('./dist/vue-ssr-client-manifest.json')
    renderer = createRenderer(bundle, {
    template,
    clientManifest
  })
  apiRoutes = require('./dist/api-bundle.js')
  apiRoutes(app)
} else {
  readyPromise = require('./build/setup-dev-server')(
    app,
    templatePath,
    (bundle, api, options) => {
      renderer = createRenderer(bundle, options)
    }
  )
}
// ...
app.get('*', isProd ? render : (req, res) => {
  readyPromise.then(() => render(req, res))
})

我设法编写了一个用于编译的 webpack 配置，entry-api.js它非常适合生产构建。至于热模块重新加载，对相关代码的任何更改都会entry-api.js触发重新编译，但这些更改永远不会实时反映。有人能告诉我我应该做些什么改变set-dev-server.js才能让它发挥作用吗？

参考：

我的 webpack 配置entry-api.js：

const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const nodeExternals = require('webpack-node-externals')

module.exports = merge(base, {
  target: 'node',
  devtool: '#source-map',
  entry: './src/entry-api.ts',
  output: {
    filename: 'api-bundle.js',
    libraryTarget: 'commonjs2'
  },
  // https://webpack.js.org/configuration/externals/#externals
  // https://github.com/liady/webpack-node-externals
  externals: nodeExternals({
    // do not externalize CSS files in case we need to import it from a dep
    whitelist: /\.css$/
  }),
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    })
  ]
})

我还在GitHub 上打开了一个问题，我怀疑它会得到任何回应。

4

0 回答 0