时间戳

首页 > 解决方案 > 在 Vue.js 中构建后出现 JSON 错误的空白页面

javascript - 在 Vue.js 中构建后出现 JSON 错误的空白页面

问题描述

我正在构建我的第一个项目（我试图了解一些关于 vue.js 的知识），当我使用 npm run build 时，我得到了带有关于 JSON 错误的空白页面。但是当我使用典型的 npm run serve 时，这个页面看起来很酷并且可以正常工作。

我试图在“组件”中的 router.js 中包含 JSON 文件，但仍然无法正常工作。

import articlejson from '@/components/databases/article.json';

export default {
    name: 'index',
    methods: {}
}
function getArticles() {
    for(let i=0; i<articlejson.length; i++) {
        const articlestructure = '<a href="/articles/' + articlejson[i].id + '"><div class="kk-activeblock row"><div class="image col-md-3" style="background-image:url(' + articlejson[i].imageURL + ')"></div><div class="col-md-9"><div class="title">' + articlejson[i].title + '</div><div class="desc">' + articlejson[i].description + '</div><div class="tags"><div class="badge" type="' + articlejson[i].tags.first + '"></div><divclass="badge" type="' + articlejson[i].tags.two + '"></div></div></div></div>'
        $('#activity-section').append(articlestructure)
    }
}

我认为这是生成正常站点的问题。实际上，在我的“div id app”中只是一个评论。为什么我认为 JSON 有问题？因为控制台告诉我： 未捕获的类型错误：无法读取 HTMLDocument 中未定义的属性“标题”。(Articles.vue:41) 在 l (jquery.js:3557) 在 c (jquery.js:3625)

标签： javascriptnode.jsjsonvue.jsbuild

解决方案

articlejson未定义。所以你的导入失败了，article.json我猜加载失败了。

在不知道完整设置的情况下，我猜你没有设置webpack或类似的东西？

推荐阅读