Vue3加vite构建的项目，路由一直无法使用和渲染

Vue3加vite构建的项目，路由一直无法使用和渲染

后来看到浏览器的控制台出现了一些警告

 

 

 经过网上搜索，找到了解决方案

https://www.jianshu.com/p/cae9caa9afc7

 

解决办法：
vue3
使用 vite 构建： 项目根目录下面建立 vite.config.js 配置别名， 详细配置

alias: {
  'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
 },

加上红字这段，就好了

 

 

实际上原因还有其它的

我的路由组件是通过如下方式定义的，就需要加上上面那句红色字的部分。

const Home = { template: '<div>Home1</div>' }

const About = { template: '<div>About2</div>' }

如果是通过传统方式引入的，则不需要加那句话

import  HelloWorld from './components/HelloWorld.vue'

import  TheWelcome from './components/TheWelcome.vue'

 

之所以没有渲染出来的原因是我在app.vue内少了一段代码

  <!-- 路由匹配到的组件将渲染在这里 -->

  <router-view></router-view>

加上才可以