VueJS 应用程序是空白的

Question

我已经开始克隆这个 repo https://github.com/auth0-blog/vue-jwt-authentication. I have developed with that for few days and developed some pages with that. Later realized that it was Vue1.0. I then used https://github.com/vuejs/vue-migration-helper 的 vueJS 应用程序并迁移到 vue 2.0。我已经一一修正了所有的错误。

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

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

Answer 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 }
})

Answer 2

更改此行：

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

至：

import Home from '@/components/Home'

我这样解决了同样的问题

Answer 3

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

vue.config.js

您可以添加 "pages"-object。使用此设置（应用于默认文件结构），我得到了效果 "no error, blank Page".

entry:'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 应用程序是空白的

VueJS app is blank

vue.js

vue-component

vuejs2