Vue.js Firebase托管Firebase功能-Java 学习之路

Problem:

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

编辑 - 见底部，取得进展

What I am trying to achieve:

我希望用Vue.js编写的"web app"作为普通应用程序工作，允许用户刷新某个页面并让它重新加载该路径 .
我也希望我的api，从app.mycompany.com/v1提供，由Firebase Cloud Functions管理，而不是我的Vue.js应用程序 .
我想将所有这些保留在Firebase Hosting服务的一个项目中 .

My Setup:

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

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

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

我正在使用Webpack构建一个"dist"文件夹进行生产环境 .

What have I tried

我在firebase.json重写部分尝试了多种变体 . 常见的方法是设置 {"source": "**", "destination": "/index.html"} 但是我的Web App工作得很好，但是API路由".../v1/{campaigns | user}"等没有 .
我尝试过组合 {"source": "**", "destination": "/index.html"} 和 {"source": "/v1**", "function": "app"} ，但它仍会导致404路径错误 .
我试过在我的函数/ index.js中添加路由来管理它，但似乎无法正确 . （我有一种感觉，我可以把它弄到这里，我只是弄乱了一些东西）

// 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)

Possible Solutions (But have a feeling there are better Options)

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

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

EDIT:

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

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

Vue.js Firebase托管Firebase功能

相关问题