How to get baseUrl in Nuxt?

在Nuxt.js中获取baseUrl是一个常见的需求，特别是在需要进行API调用或处理与URL相关的逻辑时。Nuxt.js提供了几种不同的方法来获取baseUrl，以下是几种常见的方法：

1. 使用环境变量

最常见的方法是通过环境变量来设置和获取baseUrl。这种方法的好处是可以根据不同的部署环境（开发、测试、生产等）来使用不同的URL。

在nuxt.config.js文件中设置环境变量：

javascript
export default {
  // 环境变量
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

然后，在你的组件或页面中，你可以通过process.env.baseUrl来访问这个变量：

javascript
export default {
  mounted() {
    console.log('Base URL:', process.env.baseUrl);
  }
}

2. 使用$config

从Nuxt 2.13开始，Nuxt引入了全新的运行时配置系统，可以通过$config对象来访问这些配置。

首先，在nuxt.config.js中定义你的配置：

javascript
export default {
  publicRuntimeConfig: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

接着，在组件中可以通过this.$config.baseUrl来访问：

javascript
export default {
  mounted() {
    console.log('Base URL:', this.$config.baseUrl);
  }
}

3. 使用插件

另一种方法是创建一个Nuxt插件，将baseUrl注入Vue实例中，这样在应用中任何位置都可以很方便地访问。

首先，创建一个插件文件，例如plugins/baseUrl.js：

javascript
export default ({ app }, inject) => {
  const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
  // 将baseUrl注入Vue实例
  inject('baseUrl', baseUrl);
}

然后在nuxt.config.js中注册插件：

javascript
export default {
  plugins: [
    '~/plugins/baseUrl.js'
  ]
}

现在，在任何组件中，你都可以通过this.$baseUrl来获取：

javascript
export default {
  mounted() {
    console.log('Base URL:', this.$baseUrl);
  }
}

总结

以上就是在Nuxt.js中获取baseUrl的三种常用方法。根据你的项目需求和部署环境的不同，你可以选择最适合你的方法。在实际开发中，推荐使用环境变量和$config，因为这两种方法更加灵活和安全。