VueJs 本地资产路径 [英] VueJs local assets path

问题描述

我正在开发 Vuejs 应用程序.基于 Quasar Framework ，在 src/components/Hello.vue我有一个函数来加载 json 文件

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)
    })

返回错误，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 loader

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

在这种情况下 ./config 可能看起来像:

In this case ./config may look like:

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

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