时间戳

首页 > 解决方案 > 页面刷新或直接加载显示黑屏

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

问题描述

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

我有一个在 AWS Amplify 上运行的使用 Express 的 Vue 2 应用程序。当我以“开发”模式（npm run serve）和“启动”模式（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 配置位置）有问题。不幸的是，我没有发现任何人使用相同的技术遇到相同的问题，所以希望这里有人可以提供帮助。

干杯!

标签： expressvue.jsaws-amplifyhistory.js

解决方案

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

  • 导航到 Amplify 控制台
  • 在左侧菜单上单击“重写和重定向”
  • 点击编辑
  • 添加规则： 
     Source: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
 Target: /
 Type: 200

你可以在这里阅读更多关于它的信息

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

大多数 SPA 框架都支持 HTML5 history.pushState() 来更改浏览器位置而不触发服务器请求。这适用于从根目录（或 /index.html）开始旅程的用户，但不适用于直接导航到任何其他页面的用户。使用正则表达式，以下示例为 index.html 的所有文件设置 200 次重写，但正则表达式中指定的特定文件扩展名除外。

推荐阅读