Question

在我的Vue项目中，我嘲笑了下一步开发的一些数据。我已将测试数据保存在json文件中。我的vue项目是使用Vue-Cli创建的典型项目，我项目的结构如下：

My_project
    build
    config
    data
        service_general_info.json
    node_modules
    src
        components
            component-A
                component-A.vue

如您所见，所有文件夹最初都是由vue-cli创建的。然后我创建一个新文件夹data并将测试数据json文件放在里面。

我想在axios组件内的component-A组件中读取methods: { addData() { console.log('add json data...'); axios.get('./../../data/service_general_info.json'); }, },库中的数据，如下所示：

dev

我使用相对路径来定位目标文件。但是返回404错误。那么如何正确设置路径呢？目前我在本地主机中运行GET http://localhost:8080/data/service_general_info.json 404 (Not Found)模式。

错误消息为：char arr[]="This is the string";

Answer 1

在Vue-cli项目中，axios无法从自定义文件夹中获取数据。

您应该使用static文件夹保存测试json文件。

因此，您应该像这样更改axios呼叫：

axios.get('/static/service_general_info.json');

这将从json中获取数据。

Answer 2

如果只是出于测试目的，则可以将其保存在公用文件夹中并直接在http根目录上访问。

例如我在公用文件夹中有文件results.json，然后可以使用http://localhost:8080/results.json

访问它

Answer 3

当从服务器发出http呼叫时，axios不知道你在http://localhost:8080，你必须提供完整的网址。

像这样：

methods: {
    addData() {
      console.log('add json data...');
      axios.get('http://localhost:8080/data/service_general_info.json');
    },
  },

Answer 4

您可以简单地使用import读取静态JSON文件。然后分配数据。

import ServiceInfo from './../../data/service_general_info.json';
export default{
    data(){
        return {
            ServiceInfo
        }
    }
}

Answer 5

对我来说，使用静态文件夹无法正常工作。我必须将其放在 public 文件夹中。

我将json文件夹置于公共位置，然后按如下方式访问它。

getCountries() {
    return axios.get('json/country-by-abbreviation.json', { baseURL: window.location.origin })
        .then((response) => { return response.data; })
        .catch((error) => {
            throw error.response.data;
        });
}

Answer 6

我遇到了同样的问题，只有上述解决方案无法正常工作，因为它已被上传到子目录中。我发现我需要将其放在public / assets文件夹中并使用：

axios.get(process.env.BASE_URL+'assets/file.json')

在vue.config.js中，我已经设置了本地路径和活动路径

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
    ? '/path/to/app/'
    : '/'
}

vuejs：axios get请求

6 个答案: