Question

我正在尝试将riot.js标记包含到我的项目中，以便我可以重用组件。该应用程序在Node + Express上运行，并使用Pug进行模板化。

我有一个呈现以下页面的路线：

include includes/header.pug
link(rel="stylesheet" href="/styles/kaljasakot.css" type="text/css")
body(id='bootstrap-override')
    div(class='container-fluid')
        div(class='header')
            img(class='okklogo' src='img/okkimg.jpeg' height='80' width='130')
            h1 Kaljasakot
    kaljasakot
    script(type="riot/tag" src="kaljasakot.tag")
    script(src="https://cdn.jsdelivr.net/riot/2.6/riot+compiler.min.js")
    script riot.mount('kaljasakot')
    include includes/footer.pug
    script(src='/js/kaljasakot.js')

即。我正在尝试在Pug模板中安装防暴标记kaljasakot。但是，浏览器在页面呈现控制台中出现404错误：

获取http://localhost:3001/kaljasakot.tag 404（未找到）防暴+ compiler.min.js：2

我对标记文件的位置感到有些困惑，以便编译器找到它，我在Google上找不到任何关于此的提示。有人遇到过这个案子吗？

如果需要，可以在Github link找到整个项目。

Answer 1

在编译Pug模板时，不会在应用程序运行时从浏览器获取标记文件。目前您还没有告诉Express在哪里可以找到标签文件。

要解决此问题，您可以创建一个文件夹public/tags，在其中移动标记文件并像script(type="riot/tag" src="tags/kaljasakot.tag")一样使用它们。 Express会从那里找到文件，因为您已将public文件夹配置为静态文件的源。

现在请求将不再提供404，但标记文件也不会完全正常工作。由于您在标记文件中使用Pug，因此需要在应用程序可以使用它们之前对其进行预编译。如果您只是将kaljasakot.tag放到公共文件夹中，如上所示，您会看到错误Uncaught SyntaxError: Unexpected token =，因为Riot不理解Pug语法。

因此，您可能只想将标记文件保留在views文件夹中，并设置构建步骤，您可以在其中编译标记并将其移动到public/tags文件夹。例如，请参阅Riot's documentation on server compilation和gulp-riot。

未找到Riot.js编译器/ 404标记

1 个答案: