Blank page with JSON errors after build in Vue.js

Question

I was build my first project (i trying to learn some about vue.js) and when i use npm run build i getting blank pages with errors about JSON. But when i use typical npm run serve, this page looks cool and working at all..

I tried to include JSON file in router.js in "components" and still not working.

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

I think this is problem with generating normal site. Actually, in my 'div id app' is only a comment. Why i think this is wrong with JSON? beacuse console show me: Uncaught TypeError: Cannot read property 'title' of undefined at HTMLDocument. (Articles.vue:41) at l (jquery.js:3557) at c (jquery.js:3625)

Answer 1

articlejson is undefined. So your import is failing, the loading of article.json fails I guess.

Without knowing the complete setup I would guess you didn't setup webpack or something similar?