CODEWITHSUNDEEP
webpackvue-cli
redshift
redshift

Reputation: 5217

Assets folder vs dist folder: What to place when and where?

I am not understanding how to correctly use paths in Vue-cli/Webpack. I've gone through the docs but still not making sense to me.

I have a data.json file in my default src/assets directory.

Then, in my component I am using a GET request like so (using third party AXIOS plugin):

Component: MainBody.vue

created() {
    axios.get('../assets/data.json')
      .then( response => {
        // JSON responses are automatically parsed.
        this.serviceLinks = response.data
      })
      .catch( error => {
        console.log(error)
      })
  }//end created

Here is my project structure:

enter image description here

When I run npm run dev and test, I get the following error during compilation:

    VM224:1 GET http://localhost:8080/dist/data.json 404 (Not Found)
(anonymous) @ VM224:1
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:59
Promise.then (async)
request @ Axios.js?5e65:51
Axios.(anonymous function) @ Axios.js?5e65:61
wrap @ bind.js?24ff:9
created @ MainBody.vue?87c5:34
callHook @ vue.esm.js?efeb:2895
Vue._init @ vue.esm.js?efeb:4560
VueComponent @ vue.esm.js?efeb:4728
createComponentInstanceForVnode @ vue.esm.js?efeb:4242
init @ vue.esm.js?efeb:4059
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
createChildren @ vue.esm.js?efeb:5586
createElm @ vue.esm.js?efeb:5488
patch @ vue.esm.js?efeb:5995
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
init @ vue.esm.js?efeb:4065
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
patch @ vue.esm.js?efeb:6034
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
Vue._init @ vue.esm.js?efeb:4570
Vue$3 @ vue.esm.js?efeb:4659
(anonymous) @ main.js?1c90:35
./src/main.js @ app.js:1528
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:1537
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
MainBody.vue?87c5:40 Error: Request failed with status code 404
    at createError (createError.js?16d0:16)
    at settle (settle.js?db52:18)
    at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)
VM224:1 XHR failed loading: GET "http://localhost:8080/dist/data.json".
(anonymous) @ VM224:1
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:59
Promise.then (async)
request @ Axios.js?5e65:51
Axios.(anonymous function) @ Axios.js?5e65:61
wrap @ bind.js?24ff:9
created @ MainBody.vue?87c5:34
callHook @ vue.esm.js?efeb:2895
Vue._init @ vue.esm.js?efeb:4560
VueComponent @ vue.esm.js?efeb:4728
createComponentInstanceForVnode @ vue.esm.js?efeb:4242
init @ vue.esm.js?efeb:4059
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
createChildren @ vue.esm.js?efeb:5586
createElm @ vue.esm.js?efeb:5488
patch @ vue.esm.js?efeb:5995
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
init @ vue.esm.js?efeb:4065
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
patch @ vue.esm.js?efeb:6034
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
Vue._init @ vue.esm.js?efeb:4570
Vue$3 @ vue.esm.js?efeb:4659
(anonymous) @ main.js?1c90:35
./src/main.js @ app.js:1528
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:1537
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
VM224:1 XHR finished loading: GET "http://localhost:8080/sockjs-node/info?t=1521117155016".

Do I HAVE to put the data.json file into the /dist folder? I'd hate to have to maintain the files that way . I thought it would be easier if everything is maintained in the /assets folder ? Maybe I am not understanding this workflow correctly. Thank you.

Upvotes: 0

Views: 4858

Answers (1)

Meet Zaveri
Meet Zaveri

Reputation: 3059

Assets should contain the resources which will be required by the SPA/project. Files like images, .json files,

  • I’ll create a top-level directory in the root of my project and call it assets Within that particular directory, I’ll have css, js, img, fonts, and more as seen in the image above. Within each of those directories, I may have something like scss, dev, and so on to represent my unminified, development-based files.

So using this as a guideline for our work can help. As previously mentioned, CSS, JavaScript, images, fonts, and so on can all be considered assets. Therefore, would it not make sense to have a top-level assets directory into which all of the above would live?

enter image description here

dist/ stands for distribution, and is the minified/concatenated version - actually used on production sites.

Check this answer as well - What is the role of src and dist folders?

Upvotes: 3

Related Questions