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

Question

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

我有一个使用 Express 的 Vue 2 应用程序，运行s 在 AWS Amplify 上。当我运行我的应用程序在本地处于 'dev' 模式（npm 运行服务）和 'start' 模式（npm 运行 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 文件中设置了 'history' 模式（见下文）。

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

处理对 index.html 的 SPA 调用的更好方法是

app.get(/.*/, (req, res) => res.sendFile(__dirname + '/dist/index.html'))

在前端 vue 路由器中你需要像这样添加一个重定向路由

{
      path: "*",
      redirect: "/"
}

Answer 2

您需要在 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.

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

Page refresh or direct load shows blank screen

express

history.js

vue.js

aws-amplify