vue中有关.env,.env.development,.env.production,.env.staging的相关介绍

813 阅读2分钟

文件名,不要修改

.env 全局默认配置文件,不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

.env.staging 测试环境下的配置文件

一   .env.development   文件

# just a flag
ENV = 'development'
 
# base api
VUE_APP_BASE_API = 'http://127.0.0.1:9090'
 
# 这个是处理图片上传问题的ip地址
VUE_APP_FILE_API = 'http://80.0.0.1:8090'
 
VUE_CLI_BABEL_TRANSPILE_MODULES = true
 
# 配置开发常量
# VUE_APP_  是固定写法, 类似于定义变量
# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础 URL , 方便跨域请求时使用
# http://localhost:8080  是你要访问的接口地址
 
# 接口服务地址, 以你自己的为主
# VUE_APP_SERVICE_URL = '/csdn'
 
# 这个是开发文件
# 这个是常量配置文件, 它只在开发环境有效
# 页面标题
VUE_APP_TITLE = 自动化测试平台
 
# 开发环境配置
ENV = ’development‘
 
# 自动化测试平台 / 测试环境
VUE_APP_BASE_API = '/dev-api'
 
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_ODULES = true

二、   .env.production  文件

# just a flag   生产
ENV = 'production'
outputDir = 'dist'
 
# base api
VUE_APP_BASE_API = '/prod-api'
# VUE_APP_BASE_API = 'http://xiaohuilang/CS'
 
# 图片上传的ip地址
VUE_APP_FILE_API = 'http://80.0.0.1:8090'
 
# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础 URL , 方便跨域请求时使用
# http://xiaohuilang/CS  是你要访问的接口地址
 
# 这个是生产文件, 也就是上线后这个文件才会生效, 开发的时候只会 .env.development 这个文件生效
# 这个是常量配置文件, 它只在生产环境有效
# 页面标题
VUE_APP_TITLE = 自动化测试平台
 
NODE_ENV = production
 
# 测试环境配置
ENV = ’staging‘
 
# 自动化测试平台 / 测试环境
VUE_APP_BASE_API = '/stag-api'

三、 .env.staging  文件

NODE_ENV = production
outputDir = 'test-dist'
 
# just a flag 测试
ENV = 'staging'
 
# base api
VUE_APP_BASE_API = '/stage-api'
# VUE_APP_BASE_API = 'http://12.34.567.89:8080/CS/CF'
 
# 图片上传的ip地址
VUE_APP_FILE_API = 'http://80.0.0.1:8090'
# 页面标题
VUE_APP_TITLE = 自动化测试平台
 
# 生产环境配置
ENV = ‘production’
 
# 自动化测试平台 / 生产环境
VUE_APP_BASE_API = '/prod-api'

三、 关于文件的加载 

我们运行npm run serve 在就先加载.env文件,之后加载.env.development文件,
两个文件有同一个项,则,后加载的文件就会覆盖掉第一个文件,也即是
.env.development文件覆盖掉了.env文件的NOOE_ENV选项。

如果npm run build 就执行了.env和.env.development。