首页 > 其他分享 >报错真正的原因export ‘default’(imported as‘Vue’) was not found in‘vue

报错真正的原因export ‘default’(imported as‘Vue’) was not found in‘vue

时间:2024-02-29 10:48:09浏览次数:23  
标签:Vue imported App vue 报错 was

运行npm run dev后报错:

export 'Vue' (imported as 'Vue') was not found in 'vue' 并且加载不出页面,查了很久,终于找到原因: 

报错信息:

WARNING in ./src/index.js 24:13-16
export 'Vue' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, BaseTransitionPropsValidators, Comment, DeprecationTypes, EffectScope, ErrorCodes, ErrorTypeStrings, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, TrackOpTypes, Transition, TransitionGroup, TriggerOpTypes, VueElement, assertNumber, callWithAsyncErrorHandling

 

在index.js中,老版本的写法如下:

import Vue from "vue";
import App from './App.vue';
const vm = new Vue({
    el: '#app',
    render: h => h(App)
})

使用的Vue3.x 版本,这样在命令行运行: npm run dev  始终报错:  WARNING in ./src/index.js 24:13-16
export 'Vue' (imported as 'Vue') was not found in 'vue' 

问题原因是  导入Vue的方式没按Vue3.X 的新特性书写,应该如下:

import { createApp } from 'vue'; import App from './App.vue';   createApp(App).mount('#app')

再重新打包 npm run dev

完美解决。

 

 

标签:Vue,imported,App,vue,报错,was
From: https://www.cnblogs.com/dongtian/p/18042890

相关文章

  • Vue源码解读(预):手写一个简易版Vue
    Vue源码解读(预):手写一个简易版Vue MVVM设计模式,是由MVC、MVP等设计模式进化而来,M-数据模型(Model),VM-视图模型(ViewModel),V-视图层(View)。MVVM的核心是ViewModel层,它就像是一个中转站(valueconverter),负责转换Model中的数据对象来让数据变得更容易管理和使用,该层向上与视......
  • 前端学习-vue视频学习001-了解、创建项目
    尚硅谷vue3+Typescript教程安装node.js安装教程创建项目npmcreatevue@latest运行项目npmrundev出现报错“'vite'不是内部或外部命令,也不是可运行的程序或批处理文件。”处理方式安装依赖npmi.vue文件结构<template><!--html--></template><script>......
  • 基于Vue(提供Vue2/Vue3版本)和.Net Core前后端分离、强大、跨平台的快速开发框架
    前言今天大姚给大家推荐一款基于Vue(提供Vue2/Vue3版本)和.NetCore前后端分离、开源免费(MITLicense)、强大、跨平台的快速开发框架,并且框架内置代码生成器(解决重复性工作,提高开发效率),支持移动端(iOS/Android/H5/微信小程序):Vue.NetCore。提高开发生产效率、避免996可以考虑试试这......
  • Java_常见报错&解决
    平时Java开发中常见的报错:SQLExceptionSQL异常,常见于操作数据库时的SQL语句错误。404错误:这是常见的页面不存在错误,建议仔细核查显示的网页是否存在(在运行的浏览器地址框中仔细查看当前路径,核实该路径是否正确,是否有路径错误,当前网页名字名字错误,使用了相对路径导致跳转出......
  • vue项目本地开发完成后部署到服务器后报404是什么原因呢?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一、如何部署前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后,是生成一系列的静态文件常规布署我们只需要将这个目录......
  • 假期vue学习笔记13 插槽
     <template>  <divclass="category">    <h3>{{title}}分类</h3>    <slot></slot>  </div></template><script>  exportdefault{    name:'Category',    pr......
  • 假期vue学习笔记14 求和案例vue版本
     <template>  <div>    <h1>当前求和为:{{sum}}</h1>    <selectv-model.number="n">      <optionvalue="1">1</option>      <optionvalue="2">2</option>......
  • 假期vue学习笔记15 求和mapstate_mapgetter
     importVuefrom'vue'importAppfrom'./App.vue'importstorefrom'./store'Vue.config.productionTip=falsenewVue({  el:'#root',  render:h=>h(App),  store,  beforeCreate(){    Vue.......
  • 假期vue学习笔记16 vuex多组数据共享
     <template>  <div>    <h1>当前求和为:{{sum}}</h1>    <h1>十倍的和为:{{bigSum}}</h1>    <h1>{{xuexiao}}</h1>    <h1>{{xueke}}</h1>    <h3>下方总人数为:{{$store.state.personList......
  • 假期vue学习笔记07 todo事件的本地存储
     用本地存储改写前面的todo案例 <template>    <li>      <label>        <inputtype="checkbox":checked="todo.done"@change="handleCheck(todo.id)"/>        <spanv-show="!tod......