vue环境配置详细步骤,vue生产环境和开发环境配置

　　本文主要介绍了在vue中设置环境变量的全过程，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

vue设置环境变量

　　在开发的时候，一般有三个环境：开发环境、测试环境、上线环境。

　　vue 中有个概念就是模式，默认先vue cli 有三个模式

　　开发模式用于Vue-vue-cli服务生产模式用于vue-cli服务构建和vue-cli vue-cli服务测试：e2etest模式用于Vue-CLI服务测试：单元但是往往开发的时候可能不止有三种：

　　本地环境(Local)开发环境(development)测试环境(devtest)预发布环境(beta)生产环境(production)参考链接：配置环境变量

创建不同环境变量文件

　　正如官方文件所说，通过在。env文件中，设置了特定模式特有的环境变量。我这里有5个环境，所以我配置了5个。环境文件。如下图：

给.env文件添加内容

　　基本格式如下：

　　NODE_ENV=环境名称VUE _应用程序_URL=相应的环境地址

　　我的本地环境的配置如下图所示：

　　我在本地使用easy-mock模拟数据，所以配置的地址是模拟接口地址。

在package.json中添加不同环境对应的执行语句

　　正如官方文件所说，通过passing - mode可以配置不同的模式。我自己的项目配置如下：

使用

　　文件已经创建，配置语句已经编写。怎么用？

　　您可以在主页上执行您需要的环境的命令语句。

　　例如，如果我现在需要一个本地环境，我将执行npm run local-serve。

　　如下图所示：

　　然后通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url。

　　例如，在axios请求中，我们可以将其baseURL设置为process.env.VUE_APP_URL

　　如下图所示：

　　如果你不确定自己现在处于哪个环境变量，可以看一下console.log("当前环境变量：" process.env.NODE_ENV ")和console.log("当前环境路径：" process.env.VUE_APP_URL ")。

　　总之，你需要哪个环境变量，只要【npm run对应的环境变量】就搞定了！

多环境变量

什么是多环境变量？

　　项目运行时，会根据启动指令运行不同的环境。在不同的环境下，我们配置相应的所需变量来满足我们的开发需求，这就是所谓的多环境变量。

　　一般环境分为开发环境、测试环境和生产环境。

配置流程

　　1、在项目根目录下的package.json中配置serve test build

　　通过-modexxx执行不同的环境。

　　脚本:{

　　发球: vue-CLI-发球-开球，

　　测试: vue-CLI-服务构建模式测试，

　　build : vue-CLI-服务版本，

　　}

　　open运行时自动打开页面。

　　通过npm run serve启动本地，通过npm run test包测试执行开发，通过npm run build包正式执行测试，执行production2、在项目根目录下创建.env.*文件。env.development本地开发环境配置

　　NODE_ENV=开发。env.production正式环境配置

　　NODE_ENV=生产。测试环境配置

　　NODE_ENV=生产

　　3.在src下面创建一个config文件夹下面配置三个相对应的的js

　　重新配置三是因为修改方便，不需要重启项目，符合开发习惯。

　　//根据环境引入不同的配置process.env.NODE_ENV

　　const config=require(。/env。process.env.NODE_ENV)

　　模块.导出=配置

　　配置与环境相对应的变量。以本地环境文件env.development.js为例。用户可以根据需要进行修改。

　　//本地环境配置

　　模块.导出={

　　标题：“vue-H5-模板”，

　　基本URL:“3358 localhost:9018”，//项目地址

　　基本API: https://test.xxx.com/API,//local API请求地址

　　APPID:“XXX”，

　　app secret:“XXX”

　　}

　　4.在我们根目录下的src文件内main.js文件中引入

　　从“”导入{baseUrl}。/config/index ；

　　//因为导出的对象是对象，所以结构被赋值。

　　console . log(base URL)；

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录