如何在single-spa Vue2应用中正确集成Vuetify2.6？

环境 #

• Vue 2.6.14
• Vuetify 2.6.9
• single-spa-vue 2.1.0

操作步骤 #

1. 创建single-spa根配置
2. 创建Vue应用
3. 在Vue应用目录执行vue add vuetify集成Vuetify
4. 在main.js中导入Vuetify实例
5. 启动后无法正常运行，触发报错

相关代码 #

package.json #

{
  "name": "@site/site",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "serve:standalone": "vue-cli-service serve --mode standalone"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.8.3",
    "js-cookie": "^3.0.1",
    "single-spa-vue": "^2.1.0",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuetify": "^2.6.9",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^4.1.0",
    "vue-slick-carousel": "^1.0.6",
    "vue-social-sharing": "^3.0.9",
    "vue-the-mask": "^0.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "material-design-icons-iconfont": "^6.1.1",
    "prettier": "^2.4.1",
    "sass": "~1.54.9",
    "sass-loader": "^13.0.2",
    "vue-cli-plugin-single-spa": "~3.3.0",
    "vue-cli-plugin-vuetify": "~2.5.5",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "plugin:prettier/recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.js #

import Vue from "vue";
import singleSpaVue from "single-spa-vue";

import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import VueSocialSharing from "vue-social-sharing";

Vue.config.productionTip = false;
Vue.config.devtools = process.env.VUE_APP_IS_DEV === "true";

Vue.use(VueSocialSharing);

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    render(h) {
      return h(App);
    },
    vuetify,
    router,
    store,
  },
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

控制台报错（翻译后） #

无法读取未定义的属性“isServer”
错误在Vuetify构造函数中抛出

解决方案 #

该问题源于single-spa微前端场景下，Vuetify无法正确获取Vue实例上下文，导致$vuetify初始化失败。可按以下步骤修复：

1. 修正Vuetify插件初始化逻辑
   打开plugins/vuetify.js，确保Vuetify正确绑定到Vue原型：

   import Vue from 'vue'
   import Vuetify from 'vuetify/lib/framework'
   
   Vue.use(Vuetify)
   
   export default new Vuetify({
     // 你的Vuetify配置项（如主题、图标等）
   })
   

2. 为single-spa应用指定挂载目标
   修改main.js中的appOptions，添加el配置，同时确保App.vue根组件包含<v-app>指令：

   const vueLifecycles = singleSpaVue({
     Vue,
     appOptions: {
       el: '#app', // 对应App.vue根元素的id
       render(h) {
         return h(App);
       },
       vuetify,
       router,
       store,
     },
   });
   

   App.vue示例:

   <template>
     <v-app id="app">
       <!-- 你的应用内容 -->
     </v-app>
   </template>
   

3. 确保Vuetify样式正确注入
   在main.js顶部导入Vuetify样式及图标字体：

   import 'vuetify/dist/vuetify.min.css'
   import '@mdi/font/css/materialdesignicons.css'
   

4. 调整single-spa生命周期钩子
   若仍有问题，可在bootstrap阶段手动确保Vuetify绑定完成：

   export async function bootstrap(props) {
     Vue.use(vuetify)
     return vueLifecycles.bootstrap(props)
   }
   

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