为什么nuxt构建应用程序中的baseURL总是像服务器应用程序的baseURL？答案

【问题标题】：Why baseURL in nuxt builded app always like baseURL for server app?为什么nuxt构建应用程序中的baseURL总是像服务器应用程序的baseURL？
【发布时间】：2019-10-27 07:46:06
【问题描述】：

我需要生成的 nuxt 应用程序向“/”发送请求。因此，应用程序的 api 将位于其静态生成文件所在的位置。

我遇到了问题：运行“nuxt generate”时，process.server 为 true，而 process.browser 为 false。在生成过程中，nuxt 向服务器 baseURL (localhost:3000) 发送查询，就可以了。但生成的 javascript 代码也尝试向 localhost:3000 发送查询。

我运行命令

 http-server -c-1 -p 3001 ./dist/

并在浏览器中打开 localhost:3001，我看到生成的页面，并在控制台中显示错误：

 Failed to load http://localhost:3000/data/pages.db

在我的 nuxt.config.js 中

  axios: {
    browserBaseURL: '/',
  },

当我在浏览器中运行 npm run dev 正常时，浏览器会向 '/' 发送请求，但生成的应用程序仍然会向 localhost:3000 发送请求

我该如何解决这个问题？

统一更新： 我需要从 asyncData 中的 /static 获取 json 文件。我想，我找到了解决办法。

我使用 axios，而不是 @nuxtjs/axios 并在一个地方执行以下操作：

 axios.defaults.baseURL = typeof window === 'undefined' 
     ? 'http://localhost:3000' : window.location.origin

然后在任何组件中

 import axios from 'axios'

在异步数据中：

 axios.get(`/data/teasers/${path}`)

结果，我可以生成静态文件，放置到任何域，js代码可以正确地从/static

我希望这会派上用场。

【问题讨论】：

标签： nuxt.js

【解决方案1】：

迟到的回复，可能对其他人有用。

如果您希望保持 Nuxt 应用程序的代码简单，可以使用 @nuxtjs/axios 模块，并使用插件指定浏览器使用的 baseUrl。

yarn install '@nuxtjs/axios'

在 nuxt.config.js 中：

  modules: [
    '@nuxtjs/axios'
  ],
  plugins: [
    '~/plugins/axios-set-client-baseurl.js'
  ],

在插件/axios-set-client-baseurl.js:

export default function ({ $axios }) {
  if (process.client) {
    $axios.setBaseURL(window.location.origin)
  }
}

【讨论】：