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

时间:2017-07-30 03:02:11

标签: javascript html css node.js handlebars.js

我目前正在为我的项目使用快递和把手。这是我第一次使用把手,我无法弄清楚如何正确引用我的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错误。

在把手中引用js和css文件的正确方法是什么?

1 个答案:

答案 0 :(得分:4)

您应该创建公共目录,并且在服务器中您可以提供静态文件,如图像,CSS文件和JavaScript文件,使用Express中的express.static内置中间件功能。

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

enter image description here

现在,您可以加载公共目录中的文件:

<!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>