Express 页面刷新或直接加载显示空白屏幕

我读过许多解决这个问题的方法，但没有一种对我有效。就这样

我有一个Vue 2应用程序，使用运行在AWS Amplify上的Express。当我在“dev”模式（npm run service）和“start”模式（npm run build&&node server.js）下本地运行我的应用程序时，一切正常

当我部署以放大时，问题就出现了。我可以单击导航按钮、返回和前进，所有这些都会将我发送到正确的URL。但是，当我刷新页面或在浏览器中手动输入有效URL时，屏幕变为空白，浏览器URL显示

下面是我的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”模式（见下文）

在这一点上，我确信Amplify或NameCheep（我的DNS配置）有问题。不幸的是，我还没有发现任何人使用相同的技术有相同的问题，所以希望这里有人可以帮助

---

干杯

处理SPA调用

index.html

的更好方法是

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

在前端vue路由器中，您需要添加如下重定向路由

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

---

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

• 导航到放大控制台
• 在左侧菜单上单击“重写和重定向”
• 单击编辑
• 添加规则：

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

  来源：
  目标：/
  类型：200
  

你可以阅读更多关于它的内容

转到以下部分：单页Web应用程序（SPA）的重定向

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

---

这并不能解决问题。刷新页面或直接在浏览器中输入有效的URL时，浏览器中仍会显示一个带有“”的空白屏幕。很抱歉，我错过了前端部分，我已编辑了我的答案，您可以尝试一下。现在，所有刷新和直接URL输入都直接转到主页。我需要刷新/输入URL以显示。您必须将重定向路由放在路由器阵列的末尾

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