背景
当在渲染 Vue 应用程序时,renderer 只从应用程序生成 HTML 标记 (markup)。在这个示例中,我们必须用一个额外的 HTML 页面包裹容器,来包裹生成的 HTML 标记。
为了简化这些,你可以直接在创建 renderer 时提供一个页面模板。多数时候,我们会将页面模板放在特有的文件中,例如 index.template.html:
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
注意:vue-ssr-outlet 注释 这里将是应用程序 HTML 标记注入的地方。
然后,我们可以读取和传输文件到 Vue renderer 中:
const renderer = require('vue-server-renderer').createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
renderer.renderToString(app, (err, html) => {
console.log(html) // html 将是注入应用程序内容的完整页面
})
按照以上方式进行页面渲染,出现了以下报错信息:
报错信息
D:\devFolder\vue2\vue2-project\node_modules\lodash.template\index.js:1558
throw result;
^
SyntaxError: Unexpected token =
at Function (<anonymous>)
at D:\devFolder\vue2\vue2-project\node_modules\lodash.template\index.js:1550:12
at apply (D:\devFolder\vue2\vue2-project\node_modules\lodash.template\index.js:160:25)
at D:\devFolder\vue2\vue2-project\node_modules\lodash.template\index.js:1587:12
at apply (D:\devFolder\vue2\vue2-project\node_modules\lodash.template\index.js:162:25)
at D:\devFolder\vue2\vue2-project\node_modules\lodash.template\index.js:810:12
at template (D:\devFolder\vue2\vue2-project\node_modules\lodash.template\index.js:1549:16)
at parseTemplate (D:\devFolder\vue2\vue2-project\node_modules\vue-server-renderer\build.dev.js:8828:11)
at new TemplateRenderer (D:\devFolder\vue2\vue2-project\node_modules\vue-server-renderer\build.dev.js:8914:9)
at createRenderer (D:\devFolder\vue2\vue2-project\node_modules\vue-server-renderer\build.dev.js:9179:26)
解决方案
经查找,若原来的html中有这样的代码
<%= htmlWebpackPlugin.options.loading.css %>
<%= htmlWebpackPlugin.options.loading.html %>
<%= BASE_URL %>
<%= htmlWebpackPlugin.options.title %>
等包含**<%=%> ** 计算符号,会导致html文件解析插入失败,可以将该部分代码删除后重试。