VueJS 应用程序是空白的答案

【问题标题】：VueJS app is blankVueJS 应用程序是空白的
【发布时间】：2017-01-02 19:10:18
【问题描述】：

我已经开始克隆这个 repo https://github.com/auth0-blog/vue-jwt-authentication 的 vueJS 应用程序。我已经用它开发了几天，并用它开发了一些页面。后来才知道是Vue1.0。然后我使用https://github.com/vuejs/vue-migration-helper 并迁移到 vue 2.0。我已经一一修复了所有的错误。

现在，当我运行该应用程序时，它只是没有显示任何错误，但它是空的。我什至在浏览器控制台或 npm 终端中都没有收到任何错误。在 Inspect 元素中，<div id="app"></div> 为空。有人请花点时间。我在这里有这个 repo 中的代码。 https://bitbucket.org/AswinKP/vuesample。我正在分享整个回购，因为我无法弄清楚我在哪里犯了错误。

我对此进行了研究，但找不到任何此类问题。我是 vue js 的初学者，最近两天一直在这方面苦苦挣扎。提前致谢。

【问题讨论】：

没有什么会立刻让我觉得不对劲。它适用于独立版本吗？尝试将以下内容添加到您的 webpack.config.js 中：resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' } }

标签： vue.js vue-component vuejs2

【解决方案1】：

有几个错误。首先，repo 根本无法编译。

在 index.js:8 和 :37 中文件components/IncidentTrendI7.vue 不存在，只需删除这两行即可。

并且build.js 不包含在您的index.html 中，请在您的index.html 中手动添加<script src="build/build.js"></script>

最后一个是你的根组件。您需要一个渲染函数来在 Vue 2.0 中渲染您的应用程序（如果您使用独立构建，则需要一个模板，但首选运行时版本），因此您的 index.js 中的根组件将如下所示：

const app = new Vue({
  el: '#app',
  router,
  render: h => h(App),
  components: { App }
})

【讨论】：

对不起IncidentTrendI7.vue。我有一些私人代码。所以我在最后一分钟删除了样本仓库。感谢您抽出宝贵时间..
从未听说 index.html 中需要build.js。我认为这个提示具有误导性。

【解决方案2】：

面对同样的问题，我解决了这个问题，我默认将基本 url 添加到 routerwebhistory，它指向文件夹的根目录

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vue/dist/' : '/'
}

const router = createRouter({
  history: createWebHistory('/vue/dist'),
  routes,
});

【讨论】：

【解决方案3】：

改变这一行：

import Home from './components/Home.vue'

到：

import Home from '@/components/Home'

我解决了同样的问题。

【讨论】：

【解决方案4】：

使用新的 vue-cli V3，您可以在文件中自定义构建过程的设置

vue.config.js

您可以添加“页面”-对象。使用此设置（应用于默认文件结构），我得到了“没有错误，空白页”的效果。

入口：'src/main.js'

似乎无法在开发模式下工作，甚至构建模式也能正常工作

pages: {
  index: {
    // entry for the page
    entry: 'src/main.js',
    // the source template
    template: 'public/index.html',
    // output as dist/index.html
    filename: 'customname.html',
    // when using title option,
    // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %</title>
    title: 'Print Label'
      }

【讨论】：