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

Question

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:

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.

score 3 · Answer 1 · answered Mar 15 '18 at 12:47

3

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?

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?

answered Mar 15 '18 at 12:47

Meet Zaveri

2,921
1
22
33

OK, thanks. But why does my current assets path not work? – redshift Mar 15 '18 at 12:55
Your first line when you run - npm run dev, is `GET http://localhost:8080/dist/data.json 404 (Not Found)`. But your `data.json `is in assets folder as image is displaying in yellow colour. – Meet Zaveri Mar 15 '18 at 12:56
BTW when you run npm run build, then all js files are uglified and minified by `uglify.js` and stored in one single file. Same way all things are exported into `dist` folder and it is prod ready so you can test it in browser – Meet Zaveri Mar 15 '18 at 12:59
I also have the data.json in my dist folder to see if it works and I still get the 404 not found – redshift Mar 15 '18 at 13:14
Did you included that file in Mainbody.vue as error is showing that creatError ? – Meet Zaveri Mar 15 '18 at 13:30
You are passing path to `data.json` from local folder directory. Does axios request local folder path requests? Folder path is correct. But I don't know axios processes local folder path requests as you mentioned path to access it – Meet Zaveri Mar 15 '18 at 13:32
1

[IMPORTANT] See this could help you - https://github.com/nuxt/nuxt.js/issues/2006 – Meet Zaveri Mar 15 '18 at 13:34

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

1 Answers1