Question

我在http://example.com/testsite/中设置了一个.htaccess，其中包含以下命令：

RewriteEngine On

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ index.html [L]

然后我尝试在index.js文件中设置路由。如果我的路线只是一个级别，例如http://example.com/testsite/page1

，它就可以正常工作

但是如果我尝试连接到http://example.com/testsite/category/page1这样的路由，那么我会收到以下错误：

Uncaught SyntaxError: Unexpected token <            bundle.js:1

我的路线命令如下所示：

<BrowserRouter>
      <div>
            <Switch>
              <Route exact path={"/testsite"} component={Front} />
              <Route path={"/testsite/page1"} component={Works} />
              <Route path={"/testsite/category/page1"} component={NotWorks} />
              <Route component={ErrorPage404} />
            </Switch>
      </div>
</BrowserRouter>

即使我删除第三个路由器路径并尝试让它显示错误页面，我仍然会得到相同的错误。如果我完全删除路由器代码，我仍然会收到错误。这让我相信它与路由器代码本身无关。还有什么可能是问题？

更新

根据要求，这是我的webpack.config.js文件：

var webpack = require('webpack');
var path = require('path');

var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: SRC_DIR + '/app/index.js',
  output: {
        path: DIST_DIR + '/public/js',
        filename: 'bundle.js'
  },
  module: {
        loaders: [
          {
                test: /\.jsx?$/,
                include: SRC_DIR,
                loader: 'babel-loader',
                query: {
                        presets: ['es2015','react']
                }
          }
        ]
  },
};

module.exports = config;

我的.babelrc

{
  "presets" : ["es2015", "react"]
}

Answer 1

我已经找到了问题并发现我需要更改index.html文件中的脚本行：

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

到此：

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

这样做的原因是，在后端，.htaccess将所有流量重定向到index.html，浏览器中的路径保持不变。因此，当浏览器尝试加载javascript文件时，它会在/ testsite / category /目录（在技术上不存在）中查找它，而不是在/ testsite /目录中查找它。

Answer 2

我遇到了同样的问题。就我而言，可以使用下一个 .htaccess ：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

并且在webpack.config.js中将产品的publicPath从“”更改为“ /” ，例如：

output: {
            path: argv.mode === "production" ? __dirname + '/prod' : __dirname + '/dist',
            publicPath: '/',
            filename: '[hash].bundle.min.js'
        },

未捕获的SyntaxError：意外的令牌＆lt;在React JS中

2 个答案: