экспорт "по умолчанию" (импортированный как Vue) не найден в "vue"

#vue.js #vuejs3

Вопрос:

Я новичок в этом vue, и я получил эту ошибку при попытке запуска (npm run serve):

 ***WARNING Compiled with 4 warnings
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./src/router/index.js
"export 'default' (imported as 'Vue') was not found in 'vue'

Приложение, запущенное на:

Локальный: http://localhost:8080/
Сеть: http://10.2.220.30:8080 /***

index.js

 import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [{
        path: "/home",
        name: "home",
        component: Home,
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/",
        name: "login",
        component: () =>
            import ("../views/login.vue")
    },
    {
        path: "/register",
        name: "register",
        component: () =>
            import ("../views/register.vue")
    }
];
const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});
router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (localStorage.getItem("jwt") == null) {
            next({
                path: "/"
            });
        } else {
            next();
        }
    } else {
        next();
    }
});
export default router;

main.js

 import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.css";

const base = axios.create({
    baseURL: "http://localhost:4000"
});

Vue.prototype.$http = base;
Vue.config.productionTip = false;
new Vue({
    router,
    render: h => h(App)
}).$mount("#app");

1. Вы установили Vue как зависимость? Если да, то как именно?

2. Я использовал npm install vue —save

3. Вы установили Vue 2 или Vue 3? Vue недавно выпустил 3.0.0, и у него другой синтаксис для инициализации Vue. Именно поэтому у вас могут возникнуть проблемы с синтаксисом выше.

4. На самом деле, когда я создаю проект vue, я выбрал vue3 babel….

5. Сначала он работает нормально, когда я запускаю npm run serve .. но когда я выполняю этот проект, я получил эту ошибку, поэтому я устанавливаю vue с помощью npm, но затем снова получаю ту же ошибку.

Ответ №1:

Vue v3:

 import * as Vue from 'vue';
import * as VueRouter from 'vue-router';

const routes = [
  // TODO
];

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

Vue.createApp(App).use(router).mount('#app');

https://next.router.vuejs.org/guide/migration/index.html

Ответ №2:

При обновлении до vue v3 следует обновить vue-router до ‘vue-router / next’ Официальный веб-сайт и использовать этот код вместо импорта функции

 import { createRouter, createWebHistory } from 'vue-router'

и удалите

 Vue.use(VueRouter);

Ответ №3:

Убедитесь, что все зависимости установлены.

например. установите маршрутизатор

npm install vue-router@next --save

Ответ №4:

Введите эти команды в терминале проекта

 npm uninstall vue-router --legacy-peer-deps
npm install --save vue-router@3

В моем случае это сработало, проблема была связана с версией vue-router

https://blog.csdn.net/cxl1191628698/article/details/127352186