Vue Router 4 白屏

  • Z时代
  • 2024-02-09
  • 分类：IT

Vue Router 4 白屏

一、问题描述

我用npm init vite@latest创建了一个vue-ts项目。安装了vue-router@4，参考文档编写了代码，但是运行之后的页面是白屏

二、相关代码

// src\router\index.ts
import VueRouter from 'router" title="vue-router">vue-router';
// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' };
const About = { template: '<div>About</div>' };
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
});
export default router;
// src\main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');
<template>
  <!-- src\App.vue -->
  <img alt="Vue Router 4 白屏" src="./assets/logo.jpg" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
  },
});
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

三、解决方法

HaiWeiLian的回答，可以解决我的问题。
对于vue-router没有默认导出的问题，我和HaiWeiLian的解决方法，是一样的。
对于默认不支持运行时编译的问题，我是这样解决的。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js',
    },
  },
});

我在vite.config.ts中，增加了resolve.alias.vue，使其支持了运行时编译。

回答：

1、最新没有默认导出的，全部是 export， 所以你应该使用。

https://github.com/vuejs/vue-...

import {createRouter, createWebHashHistory} from 'vue-router';

2、其次默认不支持运行时编译，也就是 template 是字符串。

https://v3.cn.vuejs.org/guide...

import { render, h } from 'vue'
const Home = { 
  render() {
    return h('div', null, 'Home')
  }
};
补充：? 原来官网是这样写的啊，官网用的是 UMD 的版本，引入的 CDN 这样是没问题的(挺有迷惑性)。

以上是 Vue Router 4 白屏 的全部内容， 来源链接： utcz.com/p/935884.html

回到顶部