使用车把引用 css 和 js 文件的正确方法是什么？

Question

我目前正在为我的项目使用 express 和 handlebars。 这是我第一次使用车把，我不知道如何正确引用我的 css 和 js 文件的位置

我目前的项目结构如下

- test (root)
  -views
    -js
      -some JS files
    -css
      -some css files
    -layout
      -main.handlebars
  - servers.js (my server)

所以我在我的 main.handlebars 布局文件中做了以下操作

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="../css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="../js/{{this}}"></script>
    {{/each}}
</body>
</html>

在{{this}}中，index.css 代表 css，index.js 代表 js。

但这给了Cannot GET 404 http://localhost:8000/js/index.js错误。 所以我想也许车把以某种方式从根部看。 所以我试过了

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="views/css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="views/js/{{this}}"></script>
    {{/each}}
</body>
</html>

但是当它看起来是文件的正确位置时，这给了Cannot GET 404 http://localhost:8000/views/js/index.js错误。

在 handlebars 中引用 js 和 css 文件的正确方法是什么？

Answer 1

您应该创建公共目录，并在服务器中提供静态文件，例如images 、 fonts 、 CSS文件和JavaScript文件，使用 Express 中的express.static内置中间件功能。

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

现在，您可以加载公共目录中的文件：

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="/css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="/js/{{this}}"></script>
    {{/each}}
</body>
</html>

使用车把引用 css 和 js 文件的正确方法是什么？

问题描述

1 个解决方案

解决方案1
20 已采纳 2017-07-30 04:42:26

使用车把引用 css 和 js 文件的正确方法是什么？

问题描述

1 个解决方案

解决方案1 20 已采纳 2017-07-30 04:42:26

解决方案1
20 已采纳 2017-07-30 04:42:26