VueJs 2、NodeJs 和重新加载页面答案

【问题标题】：VueJs 2, NodeJs and reload pageVueJs 2、NodeJs 和重新加载页面
【发布时间】：2017-03-20 18:47:38
【问题描述】：

我对 VueJs 和刷新页面有疑问。当我使用特定 URL（例如：/tag/1）刷新我的 VueJs 应用程序时，会发生错误：“Uncaught SyntaxError: Unexpected token

app.get('*', (request, response) => {
   response.render('layouts/index')
})

在 ExpressJs 的文档中，可以使用插件“connect-history-api-fallback”来替换 Apache 的“.htaccess”，但这不起作用。

let app = express()
app.use(history({
    verbose: true,
    index: '/'
}))

有什么问题？

谢谢，

【问题讨论】：

【解决方案1】：

发生这种情况是因为您的客户端应用程序 (vue.js) 期望接收一些有效的 JSON 对象，但您的服务器正在提供一个 HTML 页面。

当尝试将<html><head>... 之类的字符串转换为 javascript 对象时，您的 JSON 解析器会失败并给出该错误。要在本地复制它，请打开您的开发者控制台并运行以下命令：

JSON.parse("<html></html>")

要找出到底出了什么问题，您需要查看开发者控制台的网络选项卡并查看 API 请求的服务器响应 - 您期望 JSON，但服务器可能正在服务 index.html

假设您的服务器端一切正常并且按预期处理 API 请求，那么这可能是您的 vue 组件中的一个简单错误 - 而不是从 /api/tag/1 加载您的标签数据（它会获取一个有效的 JSON 字符串），您可能正在尝试加载/tag/1（只会获取您的index.html）。

【讨论】：