如何在nuxt.config.ts中使用全局变量

在NuxtJS中，如何在.env  或 .env.* 使用全局变量来在整个应用程序中共享数据。

要在nuxt.config.ts文件中使用全局变量，可以按照以下步骤进行操作： 

在Nuxt.js中，可以使用全局变量来在整个应用程序中共享数据。要在nuxt.config.ts文件中使用全局变量，可以按照以下步骤进行操作：

IMG_URL=http://xxx.com/update/images/
API_URL=http://xxx.com/api/

在nuxt.config.ts文件中引入dotenv库，并调用它的config方法来加载.env文件中的全局变量。首先，需要使用npm或yarn安装dotenv库：

npm install dotenv --save-dev

或者

yarn add dotenv --dev

然后，在nuxt.config.ts文件的顶部添加以下代码：

import dotenv from 'dotenv';
dotenv.config();

export default defineNuxtConfig({
    ...
})

现在，你可以在nuxt.config.ts文件中使用process.env对象来访问全局变量。例如，你可以将API_URL全局变量的值用于配置axios模块的baseURL：

export default {
  // ...
  axios: {
    baseURL: process.env.API_URL
  },
  nitro: {
    devProxy: {
      "/api": {
        target: process.env.API_URL,
        changeOrigin: true
      }
    }
  },
  image: {
    provider: "cloudpics",
    cloudpics: {
      baseURL: process.env.IMG_URL
    }
  }
  // ...
}

这样就可以在nuxt.config.ts文件中使用.env配置的全局变量了。