Question

问题：

当用户在我的网络应用程序（app.mycompany.com/nested/route之类的嵌套路由）上点击刷新时，路由管理不再由我的Vue.js应用程序（Vue路由器）管理，而是回到我的404路由错误处理程序，由Firebase云功能管理。

编辑 - 见底部，取得进展

我想要实现的目标：

我喜欢我的网络应用程序＆＃34;用Vue.js编写的普通应用程序，允许用户刷新某个页面并重新加载该路径。
我也希望我的api，从app.mycompany.com/v1提供，由Firebase云功能管理而不是我的Vue.js应用程序。
我想将所有这些保留在Firebase Hosting服务的一个项目中。

我的设置：

我正在使用Firebase云功能来管理我的API路由。我在我的functions / index.js文件中设置了一堆API特定的路由，app.get('v1/campaigns', (req, res) => {...和app.get('v1/userInfo', (req, res) => {...等等。
我还使用Firebase托管（使用Firebase云功能）来提供我的Vue.js应用。

我的firebase.json文件设置如下：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {"source": "**", "function": "app"}
    ]
  }
}

我正在使用Webpack构建一个＆＃34; dist＆＃34;生产文件夹。

我尝试了什么

我在firebase.json重写部分尝试了多种变体。常见的方法是设置{"source": "**", "destination": "/index.html"}但是我的Web应用程序工作正常，但API路由＆＃34; ... / v1 / {campaign |用户}＆＃34;等等。
我尝试过合并{"source": "**", "destination": "/index.html"}和{"source": "/v1**", "function": "app"}，但仍会导致404路线错误。
我尝试在我的functions / index.js中添加路由来管理这个但是似乎无法正确使用它。（我有一种感觉，我可以在这里得到它，我只是弄乱了一些东西）

＆＃13;

// My API Routes
app.get('/v1/campaigns', (req, res) => {
...some code
}

app.get('/v1/userInfo', (req, res) => {
...some code
}
    
// My Catch All Other routes and send it to Vue.js Route
app.get('**', (req, res) => {
  res.sendFile(path.join(__dirname + '/dist/index.html'))
   
exports.app = functions.https.onRequest(app)

＆＃13;

可能的解决方案（但感觉有更好的选择）

我可以将我的API和我的Vue.js应用程序完全分成两个不同的Firebase项目。仅对API使用Firebase云功能，然后对Web应用程序（Vue.js）使用Firebase托管（技术上仍为Firebase云功能，但只有一条路径的简单index.js文件）。然后更新我的web-app API调用以指向新项目。问题是我有两个项目，两个计费账户等等....
使用Vue.js和Firebase调查SSR。（不相信这会解决问题，因为我认为它与我设置app.get('/v1'...路线的方式有关。

感谢任何帮助......

修改

我删除了Express.js文件中的一行代码，这些代码似乎导致了部分问题。 app.use('/dist', express.static(path.join(__dirname, 'dist')))
我在路由器防护中添加了vue-router，用于检查用户是否已登录，如果是则next（）route else重定向到登录页面。

我现在让API路由和Web App路由至少在同一个项目中一起工作，而不是返回404错误。

Vue.js + Firebase托管+ Firebase功能

0 个答案: