在Nuxt中切换环境变量

安装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",
    ......
  },
......

1. 格式：cross-env [变量名]=[变量值]，变量名随意写（尽量避免命名冲突），只要与next.config.js中的配置对应就可以。
   变量值要与自定义配置myenv.js中的值对应。
2. 自定义配置一定要放在 nuxt命令之前

页面调用

export default {
    async asyncData() {
        return {
            IMG_BASE_URL: process.env.API_BASE_URL
        }
    },
    ...
}