Vue.js 3+Vuetify 3+Vite项目部署至嵌套文件夹问题求助

以下是几个排查和解决的关键点：

• 配置Vue Router的base路径
  如果项目使用了Vue Router，必须将路由的base设置为和Vite一致的/app/，否则路由无法正确匹配，导致页面渲染空白：

const router = createRouter({
  history: createWebHistory('/app/'),
  routes: [/* 你的路由配置 */]
})

• 确认Vuetify资源路径适配
  Vuetify的静态资源（字体、图标等）可能因路径错误无法加载，进而导致页面无法渲染。在Vuetify配置文件中设置对应的assetsPath：

import { createVuetify } from 'vuetify'

export default createVuetify({
  assetsPath: '/app/'
})

• 显式配置Vite的base参数
  不要仅依赖命令行参数，建议在vite.config.ts中直接配置base，确保编译时路径正确：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  base: '/app/',
  plugins: [vue(), vuetify()]
})

• 检查服务器文件结构
  确保打包后的dist文件夹内所有文件都部署到服务器的app子目录下，比如服务器根目录下的app文件夹应包含index.html、assets等所有dist文件，而非将dist文件夹直接重命名为app。

• 强制刷新浏览器缓存
  部署后按Ctrl+Shift+R强制刷新页面，避免浏览器缓存旧的根目录资源导致路径冲突。

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