Vue Webpack项目在构建后显示空白页

时间:2019-09-13 18:45:25

标签: javascript vue.js vue-router

在开发模式下,一切正常,但使用静态构建后,它只是空白页!我见过很多问题,但没人能和我类似。

router / index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
import BrandPage from '@/components/BrandPage'
import Article from '@/components/Article'

Vue.use(Router)

console.log("Router");

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Main,
      props: dynamicPropsMain
    }

    ...

  ]
})

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false;
console.log("main");

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    console.log("App");
  }
}
</script>

<style>
</style>

我也这样记录每个组件:

mounted() {
  console.log("Main");
}

这是我从dist文件夹中打开index.html文件时在控制台中看到的内容: Browser console

顺便说一句没有错误!

我将index.html中的所有路径更改为relative,如您所见:

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>cosmetic</title>
  <link href=./static/css/app.6e402e4fa684582f062c00087423d24c.css rel=stylesheet>
</head>

<body>
  <script src=https://use.fontawesome.com/5c25b8d8cc.js></script>
  <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js></script>
  <script src=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
  <script src=https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js></script>
  <div id=app></div>
  <script type=text/javascript src=./static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
  <script type=text/javascript src=./static/js/vendor.5f799c4e5a271a20f280.js></script>
  <script type=text/javascript src=./static/js/app.3990053e5416194b5d89.js></script>
</body>

</html>

所有这些使我认为路由器存在问题,而且我不知道如何更深入地检查...

请任何人帮助我!!!我将非常感谢!

1 个答案:

答案 0 :(得分:0)

您只是尝试打开index.html吗?这是行不通的。 为了使用您的Vue应用程序,您必须在Web服务器上提供整个dist文件夹。