Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

怎么实现在layout.js中的服务端渲染输出内联 js #137

Closed
webaifei opened this issue Dec 11, 2019 · 3 comments
Closed

怎么实现在layout.js中的服务端渲染输出内联 js #137

webaifei opened this issue Dec 11, 2019 · 3 comments
Labels
enhancement help wanted

Comments

@webaifei
Copy link

webaifei commented Dec 11, 2019 •
edited
Loading

// layout.js中

template: EASY_ENV_IS_BROWSER ? tpl : `<!DOCTYPE html>
                  <html lang="zh-CN">
                    <head>
                      <title>{{vTitle}}</title>
                      <meta charset="utf-8">
                      <meta http-equiv="X-UA-Compatible" content="IE=edge">
                      <meta name="keywords" :content="vKeywords">
                      <meta name="description" :content="vDescription">
                      <meta http-equiv="content-type" content="text/html;charset=utf-8">
                      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
                      <link rel="apple-touch-icon" href="/logo.png">
                      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
                      ${remjs}
                    </head>
                    <body :class="baseClass">
                      ${tpl}
                    </body>
                  </html>`,

想要实现把rem适配方案js直接内联输出 ，目前特殊字符被转义了
@hubcarl
Copy link
Collaborator

hubcarl commented Dec 11, 2019 •
edited
Loading

@webaifei https://www.yuque.com/easy-team/easywebpack/inline 看看这个底部的静态资源内联

@webaifei
Copy link
Author

webaifei commented Dec 11, 2019 •
edited
Loading

@hubcarl
是这样使用吗

`<!DOCTYPE html>
                  <html lang="zh-CN">
                    <head>
                      <title>{{vTitle}}</title>
                      <meta charset="utf-8">
                      <meta http-equiv="X-UA-Compatible" content="IE=edge">
                      <meta name="keywords" :content="vKeywords">
                      <meta name="description" :content="vDescription">
                      <meta http-equiv="content-type" content="text/html;charset=utf-8">
                      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
                      <link rel="apple-touch-icon" href="/logo.png">
                      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
                      <template v-html="require('raw-loader!../../../js/rem.js')"></template>
                    </head>
                    <body :class="baseClass">
                      ${tpl}
                    </body>
                  </html>`

报错： [Vue warn]: Error in render: "ReferenceError: require is not defined"
详细报错：

2019-12-11 18:50:49,233 ERROR 86477 [index/index.js] server render bundle error, try client render, the server render error ReferenceError: require is not defined
    at Proxy.eval (eval at createFunction (/Users/u51/projects/woaika/node/node-service-m/node_modules/vue-server-renderer/build.dev.js:6161:12), <anonymous>:2:318)
    at VueComponent.Vue._render (/Users/u51/projects/woaika/node/node-service-m/node_modules/vue/dist/vue.runtime.common.dev.js:3532:22)
    at resolve (/Users/u51/projects/woaika/node/node-service-m/node_modules/vue-server-renderer/build.dev.js:8400:27)
    at waitForServerPrefetch (/Users/u51/projects/woaika/node/node-service-m/node_modules/vue-server-renderer/build.dev.js:8272:3)
    at renderComponentInner (/Users/u51/projects/woaika/node/node-service-m/node_modules/vue-server-renderer/build.dev.js:8411:3)
    at renderComponent (/Users/u51/projects/woaika/node/node-service-m/node_modules/vue-server-renderer/build.dev.js:8368:5)
    at renderNode (/Users/u51/projects/woaika/node/node-service-m/node_modules/vue-server-renderer/build.dev.js:8279:5)
    at resolve (/Users/u51/projects/woaika/node/node-service-m/node_modules/vue-server-renderer/build.dev.js:8641:7)
    at waitForServerPrefetch (/Users/u51/projects/woaika/node/node-service-m/node_modules/vue-server-renderer/build.dev.js:8272:3)
    at render (/Users/u51/projects/woaika/node/node-service-m/node_modules/vue-server-renderer/build.dev.js:8643:5)

查看最终的渲染的html ， js是被包含进来了。
但是和直接在layout.js中 内联js写法一样，都会把 ", & 等转义

image

发现图片无法显示

!function (e, t) { &quot;object&quot; == typeof exports &amp;&amp; &quot;object&quot; == typeof module ? module.exports = t() : &quot;function&quot; == typeof define &amp;&amp; define.amd ? define([], t) :

@hubcarl
Copy link
Collaborator

hubcarl commented Dec 12, 2019 •
edited
Loading

@webaifei see demo 91190e3

@hubcarl hubcarl pinned this issue Dec 12, 2019
@hubcarl hubcarl changed the title 怎么实现在layout.js中的服务端渲染 输出 内联js 怎么实现在layout.js中的服务端渲染输出内联 js Dec 12, 2019
@hubcarl hubcarl closed this as completed Dec 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hubcarl @webaifei