VueJs本地资产路径

问题描述

我正在开发Vuejs应用程序.基于Quasar Framework，位于src/components/Hello.vue中那里我有一个加载json文件的功能

I'm working on a Vuejs App. based on Quasar Framework , in src/components/Hello.vuethere 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)
    })

它返回错误，GET http://localhost:8080/assets/json/ar/ch78.json 404 (Not Found)

所以我的问题是如何从src/assets文件夹获取文件?axios.get('../assets/json/ar/myfile.json')此行需要更正

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

推荐答案

如果数据是静态的(在这种情况下)，您可以通过以下方式导入它:

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

据我所知Quasar Framework已配置json加载程序

As I know Quasar Framework has configured json loader

如果数据是动态的(例如，在编译时您不知道文件名)，则应将服务器域存储在config中的某个位置，然后将其与动态路径一起加入.可能看起来像这样:

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();

在这种情况下，./config可能类似于:

In this case ./config may look like:

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

这篇关于VueJs本地资产路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！