Vue中怎么配置使用process.env
这篇文章主要讲解了“Vue中怎么配置使用process.env”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中怎么配置使用process.env”吧！
vue process.env
process.env 为何物
process是 nodejs 下的一个全局变量，它存储着 nodejs 中进程有关的信息。
言归正传。 process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看。
而 NODE_ENV 就是其中的一个环境变量。这个变量主要用于标识当前的环境（生产环境，开发环境）。默认是没有这个环境变量的，需要自己手动配置。不同系统有不同的环境变量配置方式，在这里就不多加赘述。
NODE_ENV 与 Vue
NODE_ENV 变量只能在系统中配置吗？其实不然。在 Vue 项目中， Vue 提供了自己的配置方式。这就要涉及到 Vue CLI 中模式的概念了。 Vue CLI 文档说明了这个问题。
也就是说，在 Vue 中， NODE_ENV 可以通过 .env 文件或者 .env.[mode] 文件配置。配置过后，运行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）时，就会将该模式下的NODE_ENV载入其中了。而这些命令，都有自己的默认模式：
npm run dev(serve) ，其实是运行了 vue-cli service serve ，默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。
npm run build ，其实运行了 vue-cli service build ，默认模式为 production 。
可以在 .env.production 文件下修改该模式的 NODE_ENV 。
修改方式如下，以键值对的方式：
除了以上的修改方式外，也可以在命令后直接使用 --mode 参数手动指定模式。当然，每个模式配置的变量也不只有 NODE_ENV , 也可以通过配置其他的变量简化工作流程。
模式的应用
有了模式的概念，就可以根据不同的环境配置模式，就不用每次打包时都去更改 vue.config.js 文件了。比如在测试环境和生产环境， publicPath参数 （部署应用包时的基本 URL） 可能不同。遇到这种情况就可以在 vue.config.js 文件中，将 publicPath 参数设置为：
publicPath: process.env.BASE_URL
设置之后，再在各个 .env.[mode] 文件下对 BASE_URL 进行配置就行了，这样就避免了每次修改配置文件的尴尬。其他的配置也是同理。
Tips: 即使不是生产环境，也可以将模式设置为 production ，这样可以获得 webpack 默认的打包优化。
补充：vue中的process.env使用
1、在nodejs中使用
1、安装
npm install dotenv
2、根目录下创建 .env 文件
HOST = localhost PORT = 8080
3、入口文件中引入 dotenv 并使用
require("dotenv").config({path: '.env'})
console.log(process.env.HOST); // localhost
console.log(process.env.PORT); // 8080
2、在vue中使用
在使用脚手架创建项目的时候，会自动安装dotenv，可以从package-lock.json中找到配置
在main.js入口文件中打印
console.log(process.env);
可以看出，默认的模式是development即开发模式。
模式
也就是说，在Vue中， NODE_ENV 可以通过 .env 文件或者.env.[mode]文件配置。配置过后，运行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）时，就会将该模式下的NODE_ENV载入其中了。而这些命令，都有自己的默认模式：
npm run dev(serve)，其实是运行了vue-cli service serve，默认模式为development。可以在.env.development文件下修改该模式的NODE_ENV。npm run build，其实运行了vue-cli service build，默认模式为production。可以在.env.production文件下修改该模式的NODE_ENV。
在根目录下创建文件
NODE_ENV = production
注意：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
NODE_ENV = development VUE_APP_BASE_API = 'http://localhost:8099/'
再打印 process.env的信息如下：
注意：.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。
除了以上的修改方式外，也可以在命令后直接使用--mode参数手动指定模式。
感谢各位的阅读，以上就是“Vue中怎么配置使用process.env”的内容了，经过本文的学习后，相信大家对Vue中怎么配置使用process.env这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是蜗牛博客，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论