Question

我已经开始使用vueJS app克隆此repo https://github.com/auth0-blog/vue-jwt-authentication。我已经开发了几天，并开发了一些页面。后来意识到它是Vue1.0。然后我使用https://github.com/vuejs/vue-migration-helper并迁移到vue 2.0。我已逐一修复了所有错误。

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

我已为此研究过，无法找到任何此类问题。我是vue js的初学者，过去两天我在这方面苦苦挣扎。提前谢谢。

Answer 1

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

index.js中的

：8和：37 文件components/IncidentTrendI7.vue不存在，只需删除这两行。

且build.js未包含在index.html中，请在<script src="build/build.js"></script>

中手动添加index.html

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

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

Answer 2

更改此行：

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

为：

import Home from '@/components/Home'

我解决了同样的问题。

Answer 3

使用新的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'
      }

Answer 4

面对相同的问题，我解决了这个问题，默认情况下，我将基本URL添加到routerwebhistory中，它指向文件夹的根目录

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

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

VueJS应用程序是空白的

4 个答案: