安装cross-env插件
npm install -y -D cross-env
自定义环境变量配置
文件名随意:myenv.js
module.export = {
dev:{
DESCN:'开发环境',
API_BASE_URL:'http://localhost:9090',
},
prod:{
DESCN:'线上环境',
API_BASE_URL:'http://api.akioyuan.cn',
}
}
这里将myenv.js文件放在了与next.config.js同级目录下
配置nuxt.config.js
//引入自定义的配置
const myenv = require('./myenv')
module.export = {
......
//添加或设置环境变量,注意,这里的env不可随意写。
env: {
API_BASE_URL: myenv[process.env.MY_MODE].API_BASE_URL,
}
......
}
这样,就可以在系统中使用:process.env.API_BASE_URL了。
配置package.json
在脚本中添加自定义变量。
......
"scripts": {
"dev": "cross-env MY_MODE=dev nuxt",
"build": "cross-env MY_MODE=prod nuxt build",
"start": "cross-env MY_MODE=prod nuxt start",
"gen:dev": "cross-env MY_MODE=dev nuxt generate",
"gen:prod": "cross-env MY_MODE=prod nuxt generate",
......
},
......
- 格式:cross-env [变量名]=[变量值],变量名随意写(尽量避免命名冲突),只要与next.config.js中的配置对应就可以。
变量值要与自定义配置myenv.js中的值对应。- 自定义配置一定要放在 nuxt命令之前
页面调用
export default {
async asyncData() {
return {
IMG_BASE_URL: process.env.API_BASE_URL
}
},
...
}