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

Undergarment

I expect your src directory isn't directly available via a call to your web server. What build tool do you use for Vue? – Fuzzy

You can use import for static assets. – Hyperphagia

see why im not using import here ..#46431411 – Undergarment

Answer 1

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';

Rew