在Vue.js中構建后出現JSON錯誤的空白頁

Question

我正在構建我的第一個項目（我試圖學習一些有關vue.js的內容），當我使用npm run build時，我得到了帶有JSON錯誤的空白頁面。 但是，當我使用典型的npm運行服務時，此頁面看起來很酷並且可以正常工作。

我試圖將JSON文件包含在router.js的“組件”中，但仍然無法正常工作。

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應用”中只是一個評論。 為什么我認為JSON這是錯誤的？ 因為控制台向我顯示了： 未捕獲的TypeError：無法讀取HTMLDocument上未定義的屬性“ title”。 （Articles.vue：41）在l（jquery.js：3557）在c（jquery.js：3625）

Answer 1

articlejson是未定義的。 因此，您的導入失敗，我猜我無法加載article.json 。

不知道完整的設置，我想您可能沒有設置webpack或類似的東西？