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

【问题标题】：Blank page with JSON errors after build in Vue.js在 Vue.js 中构建后出现 JSON 错误的空白页面
【发布时间】：2020-01-04 07:35:07
【问题描述】：

我正在构建我的第一个项目（我试图了解一些关于 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)

【问题讨论】：

标签： javascript node.js json vue.js build

【解决方案1】：

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

如果不知道完整的设置，我猜你没有设置webpack 或类似的东西？

【讨论】：

我只需要放入articles.vue module.exports并包含.json文件？
您需要提供更多信息。 serve 和 build 命令有什么作用？你用过vue create吗？还是您的项目设置是您自己完成的？调试控制台的输出是什么？
我使用 vue ui 并使用 Vue.js 的 UI 创建项目。服务只是启动服务器没有错误。构建也是如此。在npm run build 之后，我在控制台中没有收到任何错误，但是当我尝试启动 index.html 时，我只是得到了空白页。