我正在尝试将 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 错误:
GET http://localhost:3001/kaljasakot.tag 404 (Not Found) riot+compiler.min.js:2
我对标记文件应该位于何处以便编译器找到它感到有点困惑,而且我在 Google 上找不到任何关于此的提示。有人遇到过这种情况吗?
整个项目可以在这里找到Github link ,如果需要的话。
最佳答案
编译 Pug 模板时不会获取标记文件,而是在应用程序运行时从浏览器获取标记文件。 目前您还没有告诉 Express 在哪里可以找到标记文件。
要解决此问题,您可以创建一个文件夹 public/tags
,将标记文件移到那里并像script(type="riot/tag" src="tags/kaljasakot.tag")
一样使用它们。 Express 将从那里找到文件,因为您已经配置了 public
文件夹作为静态文件的源。
现在请求将不再给出 404,但标记文件也将无法正常工作。
由于您在标记文件中使用 Pug,因此您需要先预编译它们,然后应用程序才能使用它们。如果您只是按照上面的建议将 kaljasakot.tag 拖放到公共(public)文件夹中,您会看到错误 Uncaught SyntaxError: Unexpected token =
因为 Riot 不理解 Pug 语法。
因此,您可能只想将标记文件保留在 views
中文件夹并设置一个构建步骤,在其中编译标签并将它们移动到 public/tags
文件夹。请参阅Riot's documentation on server compilation和 gulp-riot例如。
关于javascript - Riot.js 编译器/404 标签未找到,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39816114/