将 Vue 2 迁移到 Vue 3，typeError: Vue is not a constructor

Posted 2023-02-22

【中文标题】将 Vue 2 迁移到 Vue 3，typeError: Vue is not a constructor

【英文标题】：Migrating Vue 2 to Vue 3, typeError: Vue is not a constructor

【发布时间】：2021-03-13 21:37:40

【问题描述】：

如何将我的 Vue 2 语法迁移到 Vue 3，因为我收到以下错误：

TypeError: Vue 不是构造函数。

现在我正在使用 Vue 3：

let app;

firebase.auth().onAuthStateChanged(user => 
  console.log("user", user);
  if (!app) 
    app = new Vue(
      router,
      store,
      render: h => h(App)
    ).$mount("#app");
  
);

到

import  createApp  from "vue";

const app = createApp(
);

app.mount("#app");

【参考方案1】：

您在 Vue 3、Vuex 4、Vue Router 4 中的代码相当于：

import  createApp  from 'vue'
import store from './store'
import router from './router'
import App from './App.vue'

let app;

firebase.auth().onAuthStateChanged(user => 
  console.log("user", user);
  app = createApp(App);
  app.use(store);
  app.use(router);
  app.mount("#app");
);

store.js中的store语法略有不同：

import  createStore  from 'vuex'

// now uses `createStore`
export default createStore( 
  state: ,
  getters: ,
  mutations: ,
  actions: 
)

router.js中的路由器：

import  createWebHistory, createRouter  from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  
    path: "/",
    name: "Home",
    component: Home,
  ,
  
    path: "/about",
    name: "About",
    component: About,
  ,
];

const router = createRouter(
  history: createWebHistory(),
  routes,
);

export default router;