【Vue-cli】npm run serve运行后 有warning 然后打开http://localhost:8081/ 页面空白 console报错

霍格沃兹答疑区
1

vue-cli 版本@vue/cli 4.2.3

运行npm run serve后 服务启动 但是有warning

WAIT Compiling… 2:20:45 PM

Compiling…

WARNING Compiled with 1 warning 2:20:45 PM

warning in ./src/plugins/axios.js

export ‘default’ (imported as ‘Vue’) was not found in ‘vue’ (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

App running at:

可以尝试第二个 点进去看看 Network: http://172.16.2.159:8081/

最后页面console信息

app.js:318 Uncaught TypeError: Cannot read properties of undefined (reading ‘use’)
at eval (axios.js?cb69:59:1)
at Module…/src/plugins/axios.js (app.js:85:1)
at webpack_require (app.js:315:33)
at fn (app.js:570:21)
at eval (main.js:2:72)
at Module…/src/main.js (app.js:74:1)
at webpack_require (app.js:315:33)
at app.js:1479:109
at Function.webpack_require.O (app.js:361:23)
at app.js:1480:53

2

main.js

import './plugins/axios'
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
3

你使用的是vue3，实例化app的代码需要换成这样，详见https://blog.csdn.net/weixin_43900414/article/details/121994511

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')
4

image
image1710×1332 254 KB

image
image2322×858 136 KB

5

Vue 三 框架vue-cli - 简书 这个是我自己记录的step 可以参考下
其实就是完全按照教程的 不知道是不是哪里有选错了

6

按照blog报错

image
image1914×1020 116 KB

7

该问题已经解决

我卸载了安装的最新版本 然后在下载vuecli是4.2.3 重新创建一个项目解决了