时间戳

首页 > 解决方案 > Vue 路由器空白页

vue.js - Vue 路由器空白页

问题描述

我想要一个我的 html 模板迁移到 vue 路由器。我做。我可以使用 npm run serve 代码查看我的项目。不是 npm run dev。使用 vue 创建代码创建的项目。我建立了这个项目和 index.html 空白页。不是控制台错误或任何错误。

我用 webpack 尝试了一个新的 vue 项目。（vue init webpack 项目）并在 main.css 文件中给我一个链接错误。

路线.js：

 import Home from './components/Home';
export const routes = [
  { path: '/', component : Home , name : 'home', 
  meta: {
      title: 'Web Page',
      metaTags: [
        {
          name: 'description',
          content: 'The home page of our example app.'
        },
        {
          property: 'og:description',
          content: 'The home page of our example app.'
        }
      ]
    }
  }
]

Public/index.html (imported css and js files) : 
<!doctype html>
<html lang="tr">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, 
 shrink-to-fit=no">
<link rel="icon" href="./favicon.ico">

<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- main css file -->
<link href="/css/main.min.css" rel="stylesheet">

</head>

<body><!-- start body -->
<noscript>
  <strong>We're sorry but kriptovue doesn't work properly without 
JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
  <!-- jquery -->
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<!-- bootstrap JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<!-- template JavaScript -->
<script src="/js/template-scripts.js"></script>
<!-- flickity JavaScript -->
<script src="/js/flickity.pkgd.min.js"></script>
<!-- carousel JavaScript -->
<script src="/owlcarousel/owl.carousel.min.js"></script>
<!-- parallax JavaScript -->
<script src="/js/parallax.min.js"></script>
<!-- mailchamp JavaScript -->
<script src="/js/mailchamp.js"></script>
<!-- bootstrap offcanvas -->
<script src="/js/bootstrap.offcanvas.min.js"></script>
<!-- touchSwipe JavaScript -->
<script src="/js/jquery.touchSwipe.min.js"></script>
<!-- ajax mailer -->
<script src="/js/mailer.js"></script>
<!-- seconde style additionel JavaScript -->
<script src="/js/particles-code.js"></script>
<script src="/js/particles.js"></script>
<script src="/js/smoothscroll.js"></script>
</body>
</html>

Vue 版本：2.9.6 Vue 路由器版本：3.0.6

我怎样才能解决这个问题 ？

标签： vue.jsvue-router

解决方案

推荐阅读