VueJs local assets path

user_5160386 0
Viewed 6590

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

quasar axios vuejs2 vue.js
1 Answers

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