vueenv的简单介绍

本篇文章给大家谈谈vueenv，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue项目dev.env.js和prod.env.js
• 2、.env 文件配置详解
• 3、vue项目打包配置多环境
• 4、vue如何按照环境打包项目?如何在vue文件中使用process.env?

vue项目dev.env.js和prod.env.js

  在开发过程中，经常会设置端口和IP之凳拆类的，而且开早宴发和生成环境会不一样，如果每次发布都要修改配置，会非常的不方便，而且有时会忘记修改。在vue项目中，有两个配置文件，分别为 dev.env.js 、 prod.env.js 。下面是 dev.env.js 的内容：

   BASE_URI 是服务器的api路径，我们在 dev.env.js 和 prod.env.js 都配置一个，陆粗银这样我们在使用的时候，直接通过 process.env.BASE_URI 获取就可以了，不用担心切换环境导致的问题了。

[img]

.env 文件配置详解

.env：全局默认配置文件，无论什么环境都会加载合并。

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

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

vue 会根据启动命令自动含桥加载相对应的环境配置文件。

开发环境加载 .env 和 .env.development 。

生大猜成环境加载 .env 和 .env.production 。

环境配置文件 全局配置文件

当全局的配置文件和环境的配置文件有相同配置项时，环境的配置项会覆盖全局的配置项

如：

开发环境

打印 process.env 属性滚老型

在配置文件中定义的属性在其它文件中如何访问呢？？

可以使用 process.env.xxx 来访问属性。

如：

vue项目打包配置多环境

在誉扒开发过程中经常遇到这样的情况，开发或者打包需要去请求后台的不同森兆环境（测试环境，预上线环境，正式环境），虽然可以去改动手动的去改变axios的请求前缀，但是难免会出现忘记更改过来的情况，造成一下不必要的时间浪费，因此，这边文章主要教大家如何配置利用命庆春昌令行进行不同环境的切换运行。

1.更改package.json文件，提供运行的命令

2.在根目录下新建.env.local以及.env.dpl等文件

3.在根目录下新建.htaccess文件，（如果你的路由是history模式）重写url，不然会出现404，页面找不到

4.在根目录下新建deploy.yaml文件

vue如何按照环境打包项目?如何在vue文件中使用process.env?

修改 config/prod.env.js 文件如下：

修改 config/dev.env.js 文件如下：

也就是说，如果我运行 npm run build test 命令，那么 process.argv.slice(2)[0] 得到的就是字符串 test ，前提是我的 package.json 文件坦含中的命令没有去做其他的更改，如果你是用了其他的插件，请根据情况修纤信唯改

但是这还不够， process.env 是node中的环境变量，在模块中是无法直接拿到的，比如 .js 、 .vue ，还需要配置毁培一下 DefinePlugin

webpack.prod.conf.js

在vue文件中使用的获取方式相同

关于vueenv和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。