YuMoXingChen 2022-01-15 19:53 采纳率: 0%
浏览 53

router-view在build后不显示

在dev时一切正常但是打包之后就不对了

我用yarn create vite新建了一个项目,做了如下修改:
1、在components文件夹下a、b个组件,内容分别是

<template>
<h1>
  aaaaaaaaaaaa <!-- b -->
</h1>
</template>

2、在src文件夹下新建router文件夹,其中新建router.js

import { createRouter,createWebHistory } from "vue-router";

const routes=[
  {path:"/",component:import('../components/a.vue')},
  {path:"/b",component:import('../components/b.vue')}
]

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

export default router

3、在APP.vue中放router-view,其余未修改

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <router-view></router-view>
</template>

4、main.js

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

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

遇到的问题
yarn dev一切正常

img

img

然后yarn build
yarn preview
就变成了这样,不显示了。

img

img

是我写的有问题吗?但是为什么yarn dev的时候是正常的

  • 写回答

2条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-01-15 22:27
    关注

    可能和你的路由模式有关,设置成hash试一下
    再有排查一下控制台报错,看看是什么问题,到底是组件没有加载出来,还是路由渲染的问题?

    评论

报告相同问题?

问题事件

  • 创建了问题 1月15日

悬赏问题

  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面