Nuxt.js 配置環(huán)境變量

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",
    // 下面為修改過(guò)的,上面的自己忽略,
    // 若為 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、根目錄下新增環(huán)境變量文件

package.json 中未設(shè)置 ENV=xxx 時(shí),默認(rèn)走此.env 文件
若設(shè)置了 ENV=xxx,則一定要增加 .env.xxx 文件

.env文件:默認(rèn)文件,

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

.env.prod文件package.json 運(yùn)行條件中中設(shè)置了 ENV=prod 的,會(huì)走此文件

// .env.prod
BASE_URL = 'prod 123123123'
BASE_HOST = 'prod adsasdasd'
4、配置 nuxt.config.js

使用 dotenv,從文件加載 自定義 的環(huán)境變量,
由于 nuxtjs 自身的process.env上有其自帶的一些環(huán)境變量,為了防止丟失,因此 使用下面的方式擴(kuò)展覆蓋原有的 env。
注意!注意! 正常頁(yè)面,js 中輸出 process.env 時(shí),只有一個(gè)空對(duì)象,但是你訪問(wèn)里面的變量不影響;

// 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)

以上為個(gè)人整理,如有錯(cuò)誤請(qǐng)指正,謝謝

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容