Question

我遇到了一个问题，每当我尝试链接 Express 应用程序的静态文件以更改它的前端时，它都没有响应。这是我的文件格式。

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './public/js/main.js',
  output: {
    filename: './public/build/bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules']
  },
  module: {
    loaders: [
      {
        test: /\.js/,
        loader: 'babel',
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('./public/build/bundle.css')
  ]
};

如您所见，所有文件都嵌套在同一个文件夹中。 Routes.js 文件只有路由，现在它有代码说“Hello World！”通过使用 res.send。 App.js 是我们的主文件。里面有，

- app
-- api
--- routes.js
-- node_modules
-- public
--- img
--- css
---- styles.css
--- index.html
-- app.js
-- package-lock.json
-- package.json

这是 index.html 文件。

const path = require("path");
const express = require("express");
const app = express();
const port = 8080;

require("./api/routes.js")(app);

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

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`);
});

我尝试了很多方法来提供静态文件，但都没有奏效。在我的 html 中，我有一个简单的“Hello World2”脚本，但它从未通过。谁能帮助我为什么这不起作用？非常感谢。

Answer 1

这里我要做的是使用 res.render() 插入 res.send() （它也可以帮助您拥有更清晰的文件夹结构）。在您的 app.js 中，在创建 app 实例后添加以下行：

app.set('view engine', 'ejs')
app.set('views', 'views')

如果您使用的是视图引擎，请添加第一行（如果您想要动态页面并且不想为前端创建另一个服务器，ejs 是最简单的选项）。第二行告诉应用程序，如果您到达 res.render('index')，则渲染 index.html 文件或在 views 文件夹中使用正确的视图引擎后缀。

如果这不起作用，问题将来自您的 routes.js。添加评论，我会帮助你。

为什么我不能使用 Express 提供静态文件？

1 个答案: