VueJs 本地资源路径

【问题标题】：VueJs local assets pathVueJs 本地资源路径
【发布时间】：2018-03-08 19:07:55
【问题描述】：

我正在开发一个 Vuejs 应用程序。基于 Quasar 框架，在 src/components/Hello.vue 我有一个加载json文件的功能

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')此行需要更正

【问题讨论】：

我希望您的 src 目录不能通过调用您的网络服务器直接获得。 Vue 使用什么构建工具？
静态资源可以使用import。
看看我为什么不在这里使用 import ..stackoverflow.com/questions/46430911/…

标签： vue.js vuejs2 axios quasar

【解决方案1】：

如果数据是静态的（在这种情况下），您可以这样导入：

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

据我所知 Quasar Framework 已配置 json loader

如果数据是动态的（例如，您在编译时不知道文件名），您应该将服务器域存储在配置中的某个位置，并将其与您的动态路径连接起来。它可能看起来像这样：

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

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

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

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

【讨论】：