Vue 3项目本地正常，部署Nginx后仅挂载无内容，求配置排查

结合你的代码和现象（日志显示应用挂载但页面空白），以下是几个关键排查方向和修复方案：

1. 修复App.vue中的循环引用问题 #

你的App.vue直接导入了main.js的app实例，这会触发循环引用：main.js创建并挂载App组件，而App.vue又反向导入main.js的实例，导致组件初始化异常，RouterView无法正常渲染。

修复步骤：

• 单独封装mitt事件总线到工具文件，避免循环引用：

// src/utils/emitter.ts
import mitt from 'mitt';
export const emitter = mitt();

• 修改main.js，使用封装的emitter：

import { emitter } from './utils/emitter';
// ...
app.config.globalProperties.emitter = emitter;

• 修改App.vue，移除对main.js的导入：

<template>
  <RouterView></RouterView>
</template>

<script setup lang="ts">
import { RouterView, onMounted } from "vue";
import { emitter } from './utils/emitter';

onMounted(() => {
  let script = document.createElement('script')
  script.setAttribute('src', "medview/STABLE/medview/MedView_en.js")
  document.head.appendChild(script)
  
  emitter.on("reload-profile", (data: any) => {
    console.log("reload profile");        
  });
});
</script>

2. 检查路由配置与Nginx的history模式支持 #

如果你的Vue Router使用history模式，Nginx需要配置重写规则，否则直接访问路由路径或刷新页面时，Nginx会返回404，导致路由无法匹配，RouterView无内容。

Nginx基础配置（根目录部署） #

location / {
  try_files $uri $uri/ /index.html;
}

子目录部署场景 #

如果部署在Nginx的子目录（如/my-app/）：

1. 修改vite.config.ts的base配置：

base: '/my-app/'

2. 调整Nginx配置：

location /my-app/ {
  try_files $uri $uri/ /my-app/index.html;
}

3. 验证静态资源路径正确性 #

你设置了base: ''，意味着静态资源以相对路径加载。打开浏览器控制台的网络面板，检查js、css等资源是否出现404错误：

• 如果部署在子目录，需将base设置为对应子目录路径（如base: '/your-subdir/'）
• 确保dist目录完整上传到Nginx的站点目录

4. 确认路由存在默认匹配规则 #

检查你的路由配置，确保存在至少一个可匹配的路由（比如根路径路由）：

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  // 其他路由规则...
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

若没有任何匹配的路由，RouterView会渲染空白内容。

5. 排查Vuetify样式加载问题 #

检查浏览器控制台是否有样式相关错误，确保Vuetify基础样式正确导入：
在你的style.scss中确认是否包含：

@import 'vuetify/styles'; // 必须优先导入Vuetify基础样式
// 自定义样式...

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