如何将带Vue Router的Vue项目部署到Firebase并正常运行？

一、修复HTML文件结构错误 #

你的index.html存在嵌套<html>、重复<head>的语法错误，会导致浏览器解析异常，Vue无法正常挂载。修正后的HTML如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web page title</title>

    <!-- Firebase SDK 引入，仅保留实际使用的模块 -->
    <script defer src="/__/firebase/9.9.0/firebase-app-compat.js"></script>
    <script defer src="/__/firebase/9.9.0/firebase-auth-compat.js"></script>
    <script defer src="/__/firebase/9.9.0/firebase-firestore-compat.js"></script>
    <!-- 生产环境关闭模拟器连接 -->
    <script defer src="/__/firebase/init.js?useEmulator=false"></script>
</head>
<body>
    <div id="app"></div>
    <!-- 生产环境使用构建后的入口文件路径，对应dist/assets下的资源 -->
    <script type="module" src="/assets/main.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loadEl = document.querySelector('#load');
            try {
                let app = firebase.app();
                let features = [
                    'auth', 'firestore'
                ].filter(feature => typeof app[feature] === 'function');
                loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
            } catch (e) {
                console.error(e);
                loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
            }
        });
    </script>
</body>
</html>

关键修正点：

• 移除嵌套的<html>标签，确保DOM结构唯一合法
• 关闭useEmulator=true，生产环境无需连接本地模拟器
• 精简Firebase模块引入，只保留项目实际用到的功能，减少加载体积
• 修正入口JS路径：生产环境使用构建后生成的/assets/main.js，而非开发环境的/src/main.js

二、配置Firebase Hosting路由重写规则 #

Vue Router使用history模式时，必须配置Firebase重写规则，让所有请求都指向index.html，否则直接访问子路由（如/locations/Sydney）会返回404，导致应用无法加载。

在项目根目录的firebase.json中添加如下配置：

{
  "hosting": {
    "public": "dist", // 指向Vue项目构建后的dist目录
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

说明：

• public字段必须对应Vue构建输出目录（默认是dist，如果你的项目配置不同请修改）
• rewrites规则确保所有路径请求都转发到index.html，由Vue Router处理路由逻辑

三、执行正确的生产构建与部署步骤 #

1. 先运行Vue项目的生产构建命令，生成可部署的静态资源：

npm run build

执行完成后会在项目根目录生成dist文件夹，包含所有生产环境资源。

2. 部署到Firebase Hosting：

firebase deploy --only hosting

确保部署的是dist目录下的内容，而非开发源码文件。

四、清理不必要的依赖 #

你的main.js中引入了mongoose，这是Node.js端的MongoDB驱动，浏览器环境无法运行，会导致JS报错阻断应用加载，必须删除该依赖：

import { createApp } from 'vue'
import App from './App.vue'
import './style/index.css'
import router from '../src/router/index'
import { createPinia } from 'pinia'
// import mongoose from 'mongoose' // 删除此行无用代码

createApp(App).use(router).use(createPinia()).mount('#app')

五、检查Vue Router配置 #

确认路由使用history模式（如果使用hash模式可跳过，但history模式体验更优）：

import { createRouter, createWebHistory } from 'vue-router'
import Sydney from '../views/Sydney.vue'

const routes = [
  {
    path: '/locations/Sydney',
    name: 'Sydney',
    component: Sydney
  }
]

const router = createRouter({
  history: createWebHistory(), // 使用history模式
  routes
})

export default router

最后排查步骤 #

部署完成后，打开浏览器开发者工具（F12），查看Console和Network标签：

• 检查是否有资源加载失败（404）
• 查看JS报错信息，针对性解决问题

内容的提问来源于stack exchange，提问作者Epimetheus14