Question

我有简单的快递服务器，看起来像这样：

Epxress应用程序：

var express = require('express');
var compression = require('compression');
var path = require('path');
var cors = require('cors');
var router = express.Router();

var app = express();

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

app.enable('trust proxy');

app.use(compression());

app.get('*', function(req, res) {
    res.header('Cache-Control', "max-age=60, must-revalidate, private");
    res.sendFile( path.join(__dirname, 'index.html') );
});


var server = app.listen(process.env.PORT || 5000, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log(`Example app listening at http://%s:%s`, host, port);
});

简单的 html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Router test</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>

在bundle.js内部，我有带有客户端路由的ReactJS应用程序：

render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <Route path="about" component={About} />
            <Route path="about2" component={About2} />
            <Route path="about3" component={About3} />
            <Route path="*" component={NoMatch} />
        </Route>
        <Route path="*" component={NoMatch} />
    </Router>
), document.getElementById('root'));

每当我尝试导航到域：port / （路由器支持此路由）时，就可以了。但是当我尝试导航到更复杂的URL时，例如 domain：port ///..等，我在浏览器中出错：

bundle.js:1 Uncaught SyntaxError: Unexpected token <

喜欢而不是从带有index.html的静态服务器响应发送bundle.js，而在bundle.js中有html标记。

我该如何解决这个问题？

谢谢！

Answer 1

似乎发生了环回，因为*规则每次都在提供index.html，而当找不到bundle.js时，它会改为index.html ，因此试图将<解析为javascript。

一种 index-ception 如果你愿意......

Answer 2

第1步

文件夹结构：

public

   -> index.html

   -> bundle.js

第2步

像这样配置静态路径

app.use(express.static('public'))

第3步

确保配置正确。转到浏览器并直接访问您的js文件，如

localhost:3000/bundle.js

如果你看到你的javascript ... Hurrray。如果没有，那么与步骤2战斗，然后检查第3步

第4步

在ui中的脚本标记中使用相同的路径，如

<script src="/bundle.js" type="text/javascript"></script>

Answer 3

我通过添加以下行解决了同一问题：

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

Answer 4

简单地放入index.html中的中的DOT，子路由将起作用！作为快递，总是会发现带有*的所有路线的捆绑包

我的修复程序已经存在。我的仓库，请签出：https://github.com/nickjohngray/staticbackeditor

要了解为什么以及如何执行此操作，请继续阅读：

修复方法是告诉webpack何时输出脚本标签，以告诉它使包的路径成为绝对路径（不是相对路径），以便在webpack.config中设置publicPath'/'（root）和文件名'bundle .js”，则HtmlWepackPlugin将嵌入脚本标签，如

<script src="/bundle.js">

这就是我们想要的！

不

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

这是我的webpack.config的片段，允许子路由

 entry: ['babel-polyfill', './src/client/index.tsx'],
    output: {
       path: path.join(__dirname, outputDirectory),
       filename: 'staticbackeditor.js',
       publicPath: '/'
    }

如果路径是相对的，这里有一个流程示例：

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

那是错的！杀死“ 。”

环境

后端是Express服务器，bundle.js和index.html文件位于公共静态dist文件夹中

Express使用*为所有index.html文件提供

的所有请求的全部路由。

app.use('*', (req, res) => {
   res.sendFile(path.resolve('dist', 'index.html'))
})

Index.html文件具有此脚本标签（请注意使该路径相对的。）

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

步骤

用户请求页面/编辑路线
Express会返回index.html文件
Web浏览器读取此文件
浏览器找到脚本标签
浏览器发出请求以获取路径为./bundle.js的脚本
Express在静态文件夹中查找此文件
找不到它，
因此当触发全部捕获路由时它会再次返回index.html
BANG网络浏览器显示错误。

因此服务器返回index.html而不是bundle.js 发生这种情况是因为运行了全部捕获的正弦表达未找到bundle.js 在文件夹中编辑。

右流现在！如果我们将html文件脚本的源更改为绝对路径，那么无论用户在哪个路径上，express都会找到它

用户请求页面/编辑路线
Express返回index.html文件
Web浏览器读取此文件
浏览器找到脚本标签
浏览器发出请求以获取路径为/bundle.js的脚本
（注意。上方的符号消失了！）
Express在静态文件夹中查找此文件
找到了，
因此它返回bundle.js 和B！子路线有效！

Express.js，意外的令牌＆lt;

4 个答案: