VueJs local assets path

Question

I'm working on a Vuejs App. based on Quasar Framework , in src/components/Hello.vue there i have a function to load json file

axios.get('../assets/json/ar/myfile.json')
    .then(response => {
      // JSON responses are automatically parsed.
      console.log(response)
    })
    .catch(e => {
      this.errors.push(e)
    })

it returns error, GET http://localhost:8080/assets/json/ar/ch78.json 404 (Not Found)

so my question is how to get the file from src/assets folder ? axios.get('../assets/json/ar/myfile.json') this line need to be corrected

I expect your src directory isn't directly available via a call to your web server. What build tool do you use for Vue? — Jason Smith, Sep 27 '17 at 10:36
see why im not using import here ..https://stackoverflow.com/questions/46430911/simplest-method-for-copying-all-objects-into-array?noredirect=1#comment79819723_46430911 — rashidnk, Sep 28 '17 at 15:50

Max Liashuk · Answer 1 · 2017-09-27T12:19:38.730

If the data is static (as in this case) you could import it this way:

import myFile from './json/ar/myfile.json'
console.log(myFile.someProp); // will work

As I know Quasar Framework has configured json loader

If data is dynamic (e.g. you don't know the file name at compile time) you should store the server domain somewhere in config and join it with you dynamic path. It may look like this:

import { BASE_URL } from './config'
const lang = getCurrentLang(); // this is dynamic

axios.get(`${BASE_URL}/assets/json/${lang}/myfile.json`)
     .then()
     .catch();

In this case ./config may look like:

export const BASE_URL = 'http://localhost:8080';

VueJs local assets path

1 Answers1

Linked