最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

使用Express创建单页应用程序

运维笔记admin12浏览0评论

使用Express创建单页应用程序

使用Express创建单页应用程序

我正在尝试使用React / Redux / Express堆栈创建SPA。我的服务器目前看起来像这样:

import express from 'express'
import dotenv from 'dotenv'
import path from 'path'

dotenv.config()

const app = express()

app.use(express.static(__dirname + '../client/static/public/'))
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 
  '../client/static/public/index.html'))
})
app.listen(process.env.PORT)

在我的html中,我有一个src =“webpack bundle file的路径”的脚本标记。 src返回html文档而不是捆绑文件的内容。我知道这是因为我服务器中的所有路径。我的问题是如何设置路线,以便全能不影响其他路线?先谢谢你!

编辑:

这是我的完整HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Backers Online</title>
    <link rel="stylesheet" href=".3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <div id="root"></div>
    <script src="../build/app.bundle.js"></script>
  </body>
</html>
回答如下:

app.use(express.static(...))的目的是为给定目录中的文件提供服务。出于安全原因,它不提供该目录之外的文件(如../build/app.bundle.js)。因此,您应该多次添加它,因为您有要服务的目录:

app.use(express.static(__dirname + '/../client/static/public/'));
app.use(express.static(__dirname + '/../client/static/build/'));

然后在客户端,您只需要文件,HTML不知道哪些目录包含它们:

<script src="app.bundle.js"></script>

编辑:您在服务的目录路径中有一个拼写错误。添加像这样的/__dirname + '/..'

正如我在评论中所说,如果你显示__dirname,你会立即看到它。

发布评论

评论列表(0)

  1. 暂无评论