Vue webpack项目构建后出现空白页面答案

【问题标题】：Vue webpack project presents blank page after buildingVue webpack项目构建后出现空白页面
【发布时间】：2020-01-15 15:20:45
【问题描述】：

在开发模式下一切正常，但使用静态构建后它只是空白页面！我见过很多问题，但没有一个与我的相似。

路由器/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 文件时，这就是我在控制台中看到的内容：

顺便说一句，没有错误！

如您所见，我将 index.html 中的所有路径都更改为相对路径：

<!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>

这些都让我觉得是路由器的问题，我不知道如何更深入地检查......

请任何人帮助我！我将不胜感激！

【问题讨论】：

我可以在您的路由器定义中看到一个名为dynamicPropsMain 的变量，该变量未定义，也未导入。您能否验证该变量存在于上下文中并且不会阻止路由器匹配/ 路由？
您究竟是如何“打开”index.html 的？也许尝试为此使用网络服务器。例如。对于 VS Code 使用 marketplace.visualstudio.com/…
@Farsad 它存在。我没有附上它，因为它是与问题无关的额外信息。请注意开发模式正常工作:)
@MartinTuróci 无论如何它应该可以工作...我将路径更改为 .js 和 .css 谢谢！我会尝试并写下结果
@serejaonly 感谢您的确认，但可能就是这样，请注意所需的查询参数，因为它们可以防止路由在运行时匹配。无论如何，我建议您尝试使用 Vue devtools 插件调试您的应用程序。

标签： javascript vue.js vue-router

【解决方案1】：

您只是想打开 index.html 吗？这行不通。为了使用您的 Vue 应用程序，您必须通过 Web 服务器为整个 dist 文件夹提供服务。

【讨论】：

为什么如此重要？我想如果你在 index.html 中有绝对路径（用于服务）会是这样，因为我有很多例子可以正常工作