Question

我试图找出一种显示测试页的方法。但是直到现在都没有成功。我尝试过的方法是使用npm run build。我已经创建了.htaccess文件，但仍然向我返回空白页（控制台中没有任何错误）。另外，我在package.json中插入了道具"homepage": "localhost/build-interface",，有人对如何解决这个问题有一些想法吗？

index.js

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="localhost/build-interface/favicon.ico" />
    <meta name="viewport"
        content="initial-scale=1,maximum-scale=1,minimum-scale=1,target-densitydpi=device-dpi,user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="localhost/build-interface/manifest.json" />
    <title>React App</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link href="localhost/build-interface/static/css/2.df50b353.chunk.css" rel="stylesheet">
    <link href="localhost/build-interface/static/css/main.f68e1149.chunk.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <p>test here</p>
    <div id="root"></div>
    <script>!function (f) { function e(e) { for (var r, t, n = e[0], o = e[1], u = e[2], l = 0, i = []; l < n.length; l++)t = n[l], c[t] && i.push(c[t][0]), c[t] = 0; for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (f[r] = o[r]); for (s && s(e); i.length;)i.shift()(); return p.push.apply(p, u || []), a() } function a() { for (var e, r = 0; r < p.length; r++) { for (var t = p[r], n = !0, o = 1; o < t.length; o++) { var u = t[o]; 0 !== c[u] && (n = !1) } n && (p.splice(r--, 1), e = l(l.s = t[0])) } return e } var t = {}, c = { 1: 0 }, p = []; function l(e) { if (t[e]) return t[e].exports; var r = t[e] = { i: e, l: !1, exports: {} }; return f[e].call(r.exports, r, r.exports, l), r.l = !0, r.exports } l.m = f, l.c = t, l.d = function (e, r, t) { l.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, l.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, l.t = function (r, e) { if (1 & e && (r = l(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var t = Object.create(null); if (l.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var n in r) l.d(t, n, function (e) { return r[e] }.bind(null, n)); return t }, l.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return l.d(r, "a", r), r }, l.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, l.p = "localhost/build-interface/"; var r = window.webpackJsonp = window.webpackJsonp || [], n = r.push.bind(r); r.push = e, r = r.slice(); for (var o = 0; o < r.length; o++)e(r[o]); var s = n; a() }([])</script>
    <script type="text/jsx" src="localhost/build-interface/static/js/2.cd99b486.chunk.js"></script>
    <script type="text/jsx" src="localhost/build-interface/static/js/main.eebb9fce.chunk.js"></script>
</body>

</html>

Answer 1

当您有这样的标签时：

<script type="text/jsx" src="localhost/build-interface/static/js/2.cd99b486.chunk.js"></script>

它不在http://localhost中查找，实际上是在文件夹/localhost/...中查找。在脚本src之前添加//，以使其在正确的文件夹中显示（或完全忽略它，而仅使用/build-interface/...）。您可以在“网络”标签中看到此内容，因为您的脚本应该是404版本。

Answer 2

也许我的问题和你的相似。

我正在使用create-react-app和this中的信息。

控制台使用Chrome或Firefox检查，通知CSS或JS文件使用了错误的文件类型内容（文本/ html）。搜索google时，您会发现许多结果，通知您只需要将其添加到.htacces中即可。

AddType text/css .css

问题是我的CSS和JS请求正在使用RewriteRule，这意味着我的CSS和JS请求（在Apache内部）正在返回index.html内容。

我解决了这个问题，包括.htaccess中的问题。

RewriteCond %{REQUEST_URI} !^.*\.(css|js|png|jpg|gif|txt)$ [NC]

我正在使用的最终.htaccess文件是：

Options -MultiViews
RewriteEngine On
AddType text/css .css
AddType text/javascript .js
RewriteCond %{REQUEST_FILENAME} !-f [OR]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^.*\.(css|js|png|jpg|gif|txt)$ [NC]
RewriteRule . index.html [NC,QSA,L]

在Apache服务器上运行ReactJS构建时的空白页

2 个答案: