vue.js - 使用 Axios baseURL 选项时远程服务器上的空白页面

Question

当部署在远程服务器上时，我的应用程序是空白/空的，但在本地运行良好(两种情况下都构建相同的静态站点)。仅当我在 Axios 中提供完整的绝对路径时，它才能在远程服务器上运行调用，但是如果我使用 Axios的 baseURL nuxt.config.js 中的选项然后应用程序在远程服务器上是空白的。

这是怎么回事？

.环境:

BASE_URL=https://path.to.cdn

nuxt.config.js:

publicRuntimeConfig: {
  baseURL: process.env.BASE_URL,
  axios: {
    browserBaseURL: process.env.BASE_URL
  }
},
axios: {
  baseURL: process.env.BASE_URL,
},

Answer 1

在我上面的评论之上，我可能会补充说，这是使 axios 正常工作的可行且灵活的配置。

// nuxt.config.js
publicRuntimeConfig: {
  baseUrl: process.env.BASE_URL,
},

...

plugins: [
  '~/plugins/nuxt-axios.js',
],

// plugins/nuxt-axios.js
export default ({ $axios, $config: { baseUrl } }) => {
  $axios.defaults.baseURL = baseUrl
}

您也可以尝试使用官方文档中的替代语法:https://axios.nuxtjs.org/options#runtime-config

publicRuntimeConfig: {
  axios: {
    browserBaseURL: process.env.BROWSER_BASE_URL
  }
},