在webpack下使用vue3 没法引入单文件的vue组件问题

2022年05月13日 阅读数:11
这篇文章主要向大家介绍在webpack下使用vue3 没法引入单文件的vue组件问题,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

产生环境

在webpack5 下 使用Vue3挂载自定义的组件vue

错误描述

WARNING in ./src/index.js 30:13-16
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports:

在这里插入图片描述

缘由

我跟着视频敲的,可能视频有必定年份了用的 是Vue2,我当时没注意看个人Vue 版本;Vue 3 和Vue 2的挂载渲染是有必定区别的。webpack

解决办法

Vue2web

import Vue from 'vue'
// 导入单文件组件
import App from './components/App.vue'

const vm = new Vue({
   
   
  el: '#app',
  render: h => h(App)
})

Vue 3bash

import {
   
   createApp } from 'vue'
import App from './components/App.vue'

createApp (App).mount('#app')