测Nuxt.js入坑,配置dev、test、pro三种环境的变量env

简介: 先下载一个cross-env模块,比较好控制环境

先下载一个cross-env模块,比较好控制环境
npm install cross-env
在package.json中写入环境的配置

"scripts": {
"dev": "cross-env NODE_ENV=dev nuxt --open ",
"test": "cross-env NODE_ENV=test nuxt",
"build": "cross-env NODE_ENV=pro nuxt build",
"start": "cross-env NODE_ENV=pro nuxt start",
"generate": "nuxt generate"
},
1
2
3
4
5
6
7
在nuxt.config.js同级目录创建一个env.js文件,写入想要的配置

module.exports = {
// 开发环境
dev: {
NODE_ENV: 'development',
// 统一登录
LOGIN_URL: 'http://xxx',
// 请求前缀
BASE_PREFIX: '/dev-api',
// 代理的后端请求服务器地址
SERVER_URL: 'https://xxx.xxx',
// 前端系统跑的端口
SYSTEM_PORT: '8888'
},
// 测试环境
test: {
NODE_ENV: 'test',
// 统一登录
LOGIN_URL: 'http://xxx',
// 请求前缀
BASE_PREFIX: '/test-api',
// 代理的后端请求服务器地址
SERVER_URL: 'https://xxx.xxx',
// 前端系统跑的端口
SYSTEM_PORT: '8888'

},
// 生产环境
pro: {
NODE_ENV: 'production',
// 统一登录
LOGIN_URL: 'http://xxx',
// 请求前缀
BASE_PREFIX: '/prod-api',
// 代理的后端请求服务器地址
SERVER_URL: 'https://xxx.xxx',
// 前端系统跑的端口
SYSTEM_PORT: '8888'
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
在nuxt.config.js中的env模块中设置环境变量
引入env
import env from './env'
1
env模块
//nuxt.config.js中
// 环境变量
env: {
NODE_ENV: env[process.env.NODE_ENV].NODE_ENV,
// 统一登录 process.env.authURL
LOGIN_URL: env[process.env.NODE_ENV].LOGIN_URL,
// 请求前缀
BASE_PREFIX: env[process.env.NODE_ENV].BASE_PREFIX,
// 请求服务器地址
SERVER_URL: env[process.env.NODE_ENV].SERVER_URL,
// 前端系统的端口
SYSTEM_PORT: env[process.env.NODE_ENV].SYSTEM_PORT
},
1
2
3
4
5
6
7
8
9
10
11
12
13

在其他地方直接通过process.env.xxx用

相关文章
|
1月前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
1天前
|
JavaScript 前端开发
JavaScript变量的特殊情况
JavaScript变量的特殊情况
|
8天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的营商环境行动计划管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的营商环境行动计划管理系统附带文章和源代码部署视频讲解等
15 4
|
9天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的环境保护生活App附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的环境保护生活App附带文章和源代码部署视频讲解等
7 0
|
16天前
|
JavaScript 前端开发
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
|
16天前
|
JavaScript
JS判断变量是不是数组?方法大全!
JS判断变量是不是数组?方法大全!
|
22天前
|
JavaScript 前端开发 Java
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
24 0
|
24天前
|
传感器 JavaScript 前端开发
VSCOde安装node.js环境
VSCOde安装node.js环境
|
29天前
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
29 2
|
30天前
|
JavaScript 前端开发
JavaScript 作用域详解:如何影响变量生命周期
JavaScript 作用域详解:如何影响变量生命周期