Question

我正在努力解决静态文件无法在我的小型应用项目中加载的问题。

app.use('/assets', express.static('public')); 我猜。此表达式不起作用。

app.js文件。

var express = require('express');
var todoController = require('./controllers/todoControllers');
var app = express();

//set up template engine
app.set('view engine','ejs');

// static files
app.use('/assets', express.static('public'));

//fire to controllers

todoController(app);

//listen to port
app.listen(3000); 
console.log('you are listening to port: 3000');

todo.ejs文件

<html>
<head>
    <title>Todo List</title>
    <link rel="stylesheet" href="/assets/styles.css">
    <script
          src="https://code.jquery.com/jquery-1.12.4.min.js"
          integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
          crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/assets/styles.css" type="text/css" />      
</head>
<body>
    <h1>My todo list</h1>
    <div id="todo-table">
        <form>
            <input type="text" name="item" placeholder="Add new item..." required />
            <button type ="submit">Add item</button>    
        </form>
        <ul>
            <% for(var i=0;i<todos.length;i++){ %>
                <li><%= todos[i].item %></li>
            <% } %>
        </ul>
    </div>
     <script src="..public/assets/todo-list.js"></script>    
   </body>
  </html>

当我进入localhost：3000并检查页面时，出现一个错误，即未加载CSS文件且未加载js文件。

Answer 1

您需要加入路径

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

有关更多信息，请参见：https://expressjs.com/en/starter/static-files.html 还要检查您是否尝试创建虚拟路径。

Answer 2

您正在将路由/assets传递到静态中间件，并将其重定向到公共目录。但是，在HTML中，您尝试直接访问URL /public/assets。不要那样做只需将您的HREF指向/assets/styles.css，静态中间件就会为您正确地将其路由到公共目录。

Answer 3

首先需要路径var path = require('path');

第二，如果assets是您要提供其内容的文件夹，并且它也与app.js文件一起位于同一文件夹中，则

app.use(express.static(path.resolve(__dirname, 'assets')));

静态文件未加载到我的项目中

3 个答案: