标签：NODE vue console cli env WELCOME ENV log

  众所周知，一个项目在开发、测试与生产环境的各种配置变量是不一样的，但在vue cli 3中通过指令vue create xxx创建的项目取消了默认的 config 和 build 文件夹，这导致刚入手的小伙伴不知道在哪儿配置环境变量，不过官方也提供了相应的配置方法。

可以在项目根目录中放置下列文件来指定环境变量：

# 在所有的环境中被载入
.env

# 只在指定的模式中被载入 如：development、production
.env.[mode]

# 在文件名末尾添加 .local 时，载入情况同上，但在git中会被忽略
.env[.[mode]].local

不过请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将会被vue载入到项目编译后的静态代码中，这是为了避免意外公开机器上可能具有相同名称的私钥。

测试：

配置文件

# /.env.production
NODE_ENV=production
WELCOME=我是来自$NODE_ENV的WELCOME
VUE_APP_WELCOME=欢迎光临，我是来自$NODE_ENV的VUE_APP_WELCOME

# /.env.development
NODE_ENV=development
WELCOME=我是来自$NODE_ENV的WELCOME
VUE_APP_WELCOME=谢谢惠顾，我是来自$NODE_ENV的VUE_APP_WELCOME

页面调用:

console.log('')
console.log(`NODE_ENV`)
console.log(process.env.NODE_ENV)
console.log('')
console.log(`WELCOME`)
console.log(process.env.WELCOME)
console.log('')
console.log(`VUE_APP_WELCOME`)
console.log(process.env.VUE_APP_WELCOME)
console.log('')

当配置mode为development时，页面调用结果如下：

当配置mode为production时，页面调用结果如下：

总结

该配置方法简单快速，不像之前的版本需要在js中配置对象；同时变量名必须符合NODE_ENV，BASE_URL 或以 VUE_APP_ 开头的规范

如有错误，欢迎指出，谢谢

标签：NODE,vue,console,cli,env,WELCOME,ENV,log
来源： https://www.cnblogs.com/taubox/p/14969327.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。