首页 > 解决方案 > Nuxt.js:未定义 ReferenceError baseURL

问题描述

我有一个 Nuxt.js 应用程序。我想读取位于static/文件夹中的本地 JSON 文件。

我的nuxt.config.js文件中有:

module.exports = {                                                                                                                                                       
    modules: [                                                                                                                                                           
        ['@nuxtjs/axios', {                                                                                                                                              
            baseURL: 'http://localhost:3000',                                                                                                                            
            browserBaseURL: 'http://localhost:3000'                                                                                                                      

        }]                                                                                                                                                               
    ],                                                                                                                                                                   

    axios: {                                                                                                                                                             
        // proxyHeaders: false                                                                                                                                           
        baseURL: "http://localhost:3000/"                                                                                                                                
    },        

在我的pages/index.vue 中

<template>                                                                                                                                                          
<section class="container">                                                                                                                                  
  <p>{{ data }}</p>                                                                                                                                                
</section>                                                                                                                                                               
</template>                                                                                                                                                              

<script>                                                                                                                      
import axios from 'axios'                                                                                                                                                

export default {                                                                                                                                                         
    components: {                                                                                                                                                        
        Make                                                                                                                                                             
    },                                                                                                                                                                   
     async asyncData({ app }) {                                                                                                                                        
      const data = await app.$axios.$get(baseURL + 'static/db.json')                                                                                                         
      return { data }                                                                                                                                                    
     }                                                                                                                                                                 

}       
</script>

我收到此错误:

 ReferenceError
 baseURL is not defined

截屏:

在此处输入图像描述

当我对 URL 进行硬编码时:

async asyncData({ app }) {                                    
        const data = await app.$axios.$get('http://localhost:3000/static/db.json')                                                                                     
        return { data }                                                                                                                                                    
    }    

我收到此错误消息:

NuxtServerError
Request failed with status code 404

有什么帮助吗?

参考:https ://axios.nuxtjs.org/

标签: javascriptasynchronousaxiosnuxt.js

解决方案


如果将 baseURL 设置为模块选项,则无需将其添加到 axios 调用中。它将被自动添加。

这不是它的工作方式。如果你在配置中定义了一些东西,它不会神奇地出现在你的代码中。您引用的任何内容都应该被定义或导入。


推荐阅读