Vue.js SSR 在非 Node.js 環(huán)境中使用

2021-01-07 15:57 更新

vue-server-renderer 在默認(rèn)構(gòu)建時(shí),會(huì)預(yù)先假定有一個(gè) Node.js 環(huán)境,這使得它在其他 JavaScript 環(huán)境(如 PHP V8Js Oracle Nashorn 中無法使用。在 2.5+ 版本中,我們把那些基本上與環(huán)境無關(guān)的構(gòu)建,編譯到 vue-server-renderer/basic.js 中,這使得它可以在上述環(huán)境中使用。

對于所有環(huán)境,必須要預(yù)先在環(huán)境中模擬 globalprocess 對象,以及將 process.env.VUE_ENV 設(shè)置為 "server" 和將 process.env.NODE_ENV 設(shè)置為 "development""production"。

在 Nashorn 環(huán)境下,可能還需要使用 Java 原生定時(shí)器,來為 PromisesetTimeout 提供 polyfill。

php-v8js 的示例用法:

<?php
$vue_source = file_get_contents('/path/to/vue.js');
$renderer_source = file_get_contents('/path/to/vue-server-renderer/basic.js');
$app_source = file_get_contents('/path/to/app.js');


$v8 = new V8Js();


$v8->executeString('var process = { env: { VUE_ENV: "server", NODE_ENV: "production" }}; this.global = { process: process };');
$v8->executeString($vue_source);
$v8->executeString($renderer_source);
$v8->executeString($app_source);
?>

// app.js
var vm = new Vue({
  template: `<div>{{ msg }}</div>`,
  data: {
    msg: 'hello'
  }
})


// 通過 `vue-server-renderer/basic.js` 暴露
renderVueComponentToString(vm, (err, res) => {
  print(res)
})
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)