Question

我正在尝试获取我的Pug模板以使用Express渲染脚本。我的文件结构如下：

views
    public
        index.jade
        main.js

index.js

我尝试将脚本的名称作为参数传递给res.render('public/index', { bundle: '/main.js' })，但是没有运气。

我的index.js的内容：

const app = express();

app.set('view engine', 'jade');

app.use(express.static(path.join(__dirname, 'views/public')));

app.use('*', (req, res, next) => {
    res.render('public/index', { bundle: '/main.js' });
});

我的index.jade的内容：

doctype html
html
    head
        title SSR React
    body
        div#root
        script(src='#{bundle}')

我在控制台中收到一个奇怪的错误。脚本名称通过，但出现错误

未捕获到的SyntaxError：意外令牌<< / p>

当我查看控制台时，main.js的内容如下：

<!DOCTYPE html><html><head><title>SSR React</title></head><body><div id="root"></div><script src="/main.js"></script></body></html>

因此，只有从Pug编译的HTML缩小文件。

有人可以在这里说些什么吗？我是否配置了Express错误？谢谢。

Answer 1

我不了解Jade，但您的Express设置很好。您可以从呈现的HTML中看到Express正在将正确的值传递到模板中，即“ /main.js”。您还知道捆绑文件正在提供中，因为您可以在devtools中的“源”下看到它。您看到的错误几乎肯定是您的已编译/打包的React代码存在的问题。请参阅ReactJS: unexpected token '<'，了解您可以尝试的一些步骤。

Answer 2

在Jade模板中编写内联JavaScript时，您需要在script标签之后添加一个点。另外，您还应该缩进代码。

例如，包括以下外部js：

script(type='text/javascript', src='/socket.io/socket.io.js')

内联js，例如：

script(type='text/javascript').

将脚本src传递到Pug模板中

2 个答案: