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)
以上为个人整理,如有错误请指正,谢谢