Vue应用本地运行正常部署Apache后报<v-app>未识别错误如何解决

该报错的本质是Vue运行时无法识别Vuetify提供的<v-app>组件，本地运行正常、Apache部署后报错，可按以下步骤排查修复：

• 检查Vuetify全局注册逻辑
  确认入口文件已完成Vuetify的全局注册，没有出现生产环境打包时引入逻辑被剔除的情况，参考注册写法：
  Vue2 示例：

  import Vue from 'vue'
  import Vuetify from 'vuetify'
  import 'vuetify/dist/vuetify.min.css'
  
  Vue.use(Vuetify)
  
  new Vue({
    vuetify: new Vuetify(),
    render: h => h(App)
  }).$mount('#app')
  

  Vue3 示例：

  import { createApp } from 'vue'
  import App from './App.vue'
  import vuetify from './plugins/vuetify'
  
  createApp(App).use(vuetify).mount('#app')
  

• 修正打包路径配置
  绝大多数本地正常线上报错的情况都是静态资源路径不匹配导致，打开vue.config.js，修改publicPath和你Apache上的部署路径一致：

  module.exports = {
    // 部署在根路径时写 '/'，部署在 /myapp/ 子路径时写 '/myapp/'
    publicPath: process.env.NODE_ENV === 'production' ? '/你的实际部署子路径/' : '/'
  }
  

  配置修改完成后重新执行npm run wc打包，将新的打包产物上传到Apache对应目录即可。
• 检查Apache静态资源权限
  打开浏览器控制台的「网络」面板，刷新页面查看是否有js、css资源加载404/403报错，如果有403报错需要调整Apache部署目录的访问权限，允许静态资源读取。
• 排查按需引入配置问题
  如果你使用了Vuetify按需引入的配置，可临时切换为全量引入后打包测试，如果报错消失，说明你的按需引入配置有误，没有把对应的组件打包到产物中。

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