1、安装cross-env

npm i cross-env -D

2、根目录下新建env.js文件;

文件内容如下;二选一

一、

module.exports = {
// 开发测试环境
dev: {
NODE_ENV: 'development',
API_URL: 'https://*****.com/'
},
//生产环境
pro: {
NODE_ENV: 'production',
API_URL: 'https://*****.com/'
},
}

二、

export default {
dev: {
server: {
port: 3000, // default: 3000
host: '0.0.0.0' // default: localhost
}, // 项目访问路径
api: {
port: '', // default: 3000
host: 'http://192.168.1.61:8080/schoolEdge'
} // 接口路径
},
qa: {
server: {
port: 6789, // default: 3000
host: '0.0.0.0' // default: localhost
}, // 项目访问路径
api: {
port: '', // default: 3000
host: 'http://192.168.0.246:9060/schoolEdge'
} // 接口路径
}
};

// 设置不同的环境端口和路径

3.修改package.json文件;

//安装cross-env插件 紧跟MODE='env' 来设置环境变量

"dev": "cross-env MODE=dev nuxt",
"build:uat": "cross-env MODE=uat nuxt build",
"start:uat": "cross-env MODE=uat nuxt start",
"build:prod": "cross-env MODE=prod nuxt build",

4.修改nuxt.config.js文件;

import env from './env';
export default {
// 服务器端变量映射到客户端
env: {
MODE: process.env.MODE
},
// 设置项目启动的端口和ip
server: env[process.env.MODE].server,
}

由此就完成了nuxtjs项目的环境变量配置,变量名字自由选择~

欢迎关注前端早茶,与广东靓仔携手共同进阶

Nuxt中使用自定义环境变量_测试环境

前端早茶专注前端,一起结伴同行,紧跟业界发展步伐~