express - 页面刷新或直接加载显示黑屏

Question

我已经阅读了针对同一问题的许多解决方案，但没有一个对我有用。所以就这样了。

我有一个使用 Express 的 Vue 2 应用程序，在 AWS Amplify 上运行。当我在“开发”模式(npm runserve)和“启动”模式(npm run build && node server.js)本地运行我的应用程序时，一切正常。

当我部署到 Amplify 时，问题出现了。我可以单击导航按钮、后退和前进，所有这些都会将我发送到正确的 URL。但是，当我刷新页面或在浏览器中手动输入有效的 URL 时，屏幕变为空白，浏览器 URL 显示 https://dontblowup.co/index.html .

下面是我的 server.js 文件:

const express = require('express')
const path = require('path')
const history = require('connect-history-api-fallback')

const app = express()
const port = process.env.PORT || 8080
const buildLocation = 'dist'
const staticFileMiddleware = express.static(path.resolve(__dirname, buildLocation))

app.use(staticFileMiddleware)
app.use(history())
app.use(staticFileMiddleware)

app.get('*', function (req, res) {
  res.sendFile(path.resolve(__dirname, buildLocation, 'index.html'))
})

app.listen(port, () => {
  console.log(`App listening to port ${port}...`)
  console.log('Press Ctrl+C to quit.')
})

我找到的解决方案包括在server.js文件中使用history包，以及在使用history()之前和之后使用staticFileMiddleware。我还在 Vue 应用程序的 router.js 文件中设置了“历史记录”模式(见下文)。

import Vue from "vue";
import VueRouter from "vue-router";

import Index from "./views/Index.vue";
import MainFooter from "./layout/MainFooter.vue";

import DashboardLayout from "@/layout/DashboardLayout.vue";
import Analytics from "@/views/Analytics.vue";
import TradeSheet from "@/views/TradeSheet.vue";
import KellyCriterionCalculator from "@/views/KellyCriterionCalculator.vue";
import PositionBuilder from "@/views/PositionBuilder.vue";

Vue.use(VueRouter);

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: "/",
      name: "Index",
      components: { default: Index, footer: MainFooter },
      props: {
        footer: { backgroundColor: "black" }
      },
      meta: { requiresAuth: false }
    },
    {
      path: "/dashboard",
      redirect: "/dashboard/analytics",
      name: "Dashboard",
      component: DashboardLayout,
      meta: { requiresAuth: true },
      children: [
        {
          path: "/dashboard/analytics",
          name: "Analytics",
          component: Analytics
        },
        {
          path: "/dashboard/trade-sheet",
          name: "Trade Sheet",
          component: TradeSheet
        },
        {
          path: "/dashboard/risk-budget-calculator",
          name: "Risk Budget Calculator",
          component: KellyCriterionCalculator
        },
        {
          path: "/dashboard/trade-analyzer",
          name: "Trade Analyzer",
          component: PositionBuilder
        }
      ]
    }
  ],
  scrollBehavior: to => {
    if (to.hash) {
      return { selector: to.hash };
    } else {
      return { x: 0, y: 0 };
    }
  }
});

此时，我确信 Amplify 或 Namecheap(我的 DNS 配置位置)有问题。不幸的是，我还没有发现任何人使用相同的技术遇到相同的问题，所以希望这里有人可以提供帮助。

干杯!

Answer 1

您需要在 Amplify 控制台上进行设置

• 导航至 Amplify 控制台
• 在左侧菜单中点击“重写和重定向”
• 点击编辑
• 添加规则:

   Source: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
   Target: /
   Type: 200
  

您可以阅读更多相关信息here

转到部分:单页 Web 应用程序 (SPA) 重定向

Most SPA frameworks support HTML5 history.pushState() to change browser location without triggering a server request. This works for users who begin their journey from the root (or /index.html), but fails for users who navigate directly to any other page. Using regular expressions, the following example sets up a 200 rewrite for all files to index.html except for the specific file extensions specified in the regular expression.