当前位置: 首页 > 文档资料 > San CLI 中文文档 >

环境变量

优质
小牛编辑
122浏览
2023-12-01

San CLI 会按照下面的优先级在项目的根目录中读取环境变量:

.env.${mode}.local
.env.${mode}
.env.local
.env

mode 取值范围为productiondevelopment

.env文件内的格式为每行一个键值对数据,举例如下:

ONE=1
SAN_VAR_TRUE=true

.env的键值对 San CLI 会根据优先级进行合并,然后复制给process.env。例如上面的赋值之后结果是process.env.ONE=1.env文件的读取是在加载san.config.js之前的,所以在san.config.js中可以直接使用.env文件设置的process.env变量。

注意:对于NODE_ENVBABEL_ENV这两个 webpack 和 Babel 用到的环境变量,如果.env中不指定,则会根据build或者serve命令的--mode来指定。

环境变量除了上面的功能之外,还可以做一些其他的用法使用,比如在插件中可以使用.env中指定的环境变量,也可以在前端代码中使用环境变量的赋值。

build命令中使用远程部署 --remote 的配置项

san build命令中,我们可以使用--remote <remote-name>的方式来将构建结果通过deploy-files插件上传到对应的开发机,方便进行测试和部署。而这里传入的remote-name实际是一个对应的开发机名称,比如小明的开发机可以配置在在.env.production中配置一个xiaoming机器相关的上传数据:

# .env.production
SAN_REMOTE_XIAOMING_RECEIVER=http://www.xiaoming.com:8080/receiver.php
SAN_REMOTE_XIAOMING_TEMPLATE_PATH=/home/work/nginx_static/html/test/template
SAN_REMOTE_XIAOMING_STATIC_PATH=/home/work/nginx_static/html/test/static
SAN_REMOTE_XIAOMING_STATIC_DOMAIN=http://test.bdstatic.com:8888

这样,当我们执行san build --remote xiaoming的时候会自动去寻找.env.production的 remote 配置,打包结束后会调用deploy-files上传数据到自己的开发机。

插件中使用环境变量,也可以按照这个思路来用,因为插件的调用也是在加载.env文件之后的。

前端代码中使用环境变量的赋值

.env中定义的以SAN_VAR_*开头的变量会被DefinePlugin作为变量直接解析成对应的值,即:

# .env 中环境变量设置为
SAN_VAR_HELLO=hello

则在代码中直接使用console.log(HELLO)会经过编译后会变成console.log('hello')

注意:

  1. SAN_VAR_*的定义不仅仅是在.env文件中,还可以在其他在打包之前的地方定义,比如在san.config.js中;
  2. 在代码中可以继续使用类似process.env.NODE_ENV这类变量。

常见应用场景举例

  1. 使用某个常量,需要在线下环境使用不同的变量,例如线下请求的数据接口是后端工程师的一个线下地址,那么可以使用环境变量定义常量;
  2. 部署代码到自己的开发机,可以将环境变量写到.env.local中,并且将该文件添加到.gitignore中;
  3. 任何需要在打包之前就计算好得到的变量,可以直接在san.config.js中直接赋值。