时间戳

首页 > 解决方案 > 使用 Axios baseURL 选项时远程服务器上的空白页

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

问题描述

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

这是怎么回事？

.env：

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,
},

标签： vue.jsenvironment-variablesnuxt.js

解决方案

除了我上面的评论之外，我还可以补充一点，这是一种可行且灵活的配置，可以让 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
  }
},

推荐阅读