Nuxt.js 配置环境变量

1、安装 cross-env

// npm 
npm install cross-env --save-dev
// yarn
yarn add cross-env

2、修改 package.json

"scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    // 下面为修改过的，上面的自己忽略，
    // 若为 js ，后面走 nuxt；ts ，则走 nuxt-ts；
    "dev:self": "cross-env NODE_ENV=development nuxt-ts",
    "build:prod": "cross-env NODE_ENV=production ENV=prod nuxt-ts build"
},

3、根目录下新增环境变量文件

package.json 中未设置 ENV=xxx 时，默认走此.env 文件
若设置了 ENV=xxx，则一定要增加 .env.xxx 文件

.env文件：默认文件，

// .env
BASE_URL = 'dev 123123123'
BASE_HOST = 'dev adsasdasd'

.env.prod文件：package.json 运行条件中中设置了 ENV=prod 的，会走此文件

// .env.prod
BASE_URL = 'prod 123123123'
BASE_HOST = 'prod adsasdasd'

4、配置 nuxt.config.js

使用 dotenv，从文件加载 自定义 的环境变量，
由于 nuxtjs 自身的process.env上有其自带的一些环境变量，为了防止丢失，因此 使用下面的方式扩展覆盖原有的 env。
注意！注意！ 正常页面，js 中输出 process.env 时，只有一个空对象，但是你访问里面的变量不影响；

// nuxt.config.js
const envConfig = require('dotenv').config({
    path: `.env${process.env.ENV ? `.${process.env.ENV}` : ''}`
})

export default {
    ..., // 其他属性配置
    env: {
        ...process.env,
        ...envConfig.parsed
    },
    ... // 其他属性配置
}

5、使用

// 其他文件中 .vue | .ts .js
const BASE_URL = process.env.BASE_URL
console.log(BASE_URL)

以上为个人整理，如有错误请指正，谢谢