启动了一个 Node 服务，用来进行服务端渲染。在开发模式下，将 script 的 url 设置为另一个客户端编译服务上的地址，用来获取开发模式下编译后的 JavaScript 文件：
getRenderHTML(CLIENT_PORT){
let scriptUrl = this.scriptUrl;
if(CLIENT_PORT){
scriptUrl = `localhost:${CLIENT_PORT}/dev-client-script.js`;
}
const htmlStr = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Charley SSR</title>
<style>${this.styleStr}</style>
<script>
window.__INITIAL_STATE__ = ${this.initialStateStr}
</script>
</head>
<body>
<div id="root">${this.content}</div>
<script src="${scriptUrl}"></script>
</body>
</html>
`
this.htmlStr = this.minifyHTML(htmlStr);
}
编译服务会将 /dev-client-script.js 的请求都转发到最新编译的文件上：
...
app.use("/dev-client-script.js", async (req, res) => {
const { records:{hash} } = clientCompiler;
const clientOutputFileName = `bundle.${hash.substr(0,5)}.js`
res.redirect(clientOutputFileName)
});
...
打开浏览器，出现了 net::ERR_UNKNOWN_URL_SCHEME 错误，无法访问到编译生成的 JavaScript 文件：
错误截图.png
解决方案是在 localhost 前面加上协议名：
getRenderHTML(CLIENT_PORT){
let scriptUrl = this.scriptUrl;
if(CLIENT_PORT){
scriptUrl = `http://localhost:${CLIENT_PORT}/dev-client-script.js`;
}
...
}
然后就 OK 了。
修复报错后的控制台.png
完。
网友评论