vue项目多环境配置(.env)的实现

目录
  • 什么是多环境配置,为什么要多环境配置?
  • .env 文件配置到哪里
  • .env文件如何配置，配置多少个？
  • .env文件的配置
  • 如何配置运行环境
  • 如何获取全局配置项的值
  • 如何运行环境

没接触多环境配置前，感觉好高大上，真正操作后感觉也就那么回事，在此把自己遇到的问题和解决方案叙述一下，有不对的地方欢迎各位大佬指出。

什么是多环境配置,为什么要多环境配置?

最常见的多环境配置，就是开发环境配置,和生产环境配置(也就是上线的配置)，很多情况下我们开发环境下的域名，和一些配置项,和我们生产模式下的不同，这个时候就需要我们进行多环境配置，不然每次发版都要改一波数据多麻烦。另一种情况就是你两个项目是用的一套代码，但是最后又要分别打成不同的包，那么这个时候多环境配置就大大提升了开发效率。

.env 文件配置到哪里

.env文件配置在你项目的根目录里面和package.json同级如下图。

.env文件如何配置，配置多少个？

.env文件如何命名？
最开始我在网上查的时候好多博主说名字必须命名成
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
其实不是的，如果你配置的是开发环境和生产环境那么这样命名，无可厚非，但是你如果是多项目公用代码，这样命名就有点驴头不对马嘴。所以这块的命名格式只需要文件开头为.env即可，后面的名字你想怎样都可以。

.env文件的配置

这块就是你想用什么东西就配置什么东西，打个比方我想在项目全局拿到一个名字，那你就直接.env里面配置就ok了，下面我会详细叙述如何取值。

npm run serve 或者npm run build 的时候，会默认走.env的配置

图示：

//这块只需要 VUE_APP_*** 以这样的形式命名就ok了，后面大写还是小写这块看你心情都可以。
VUE_APP_NAME = '娄渊洋'
VUE_APP_HTTPS = 'http://www.louhc.com/'
VUE_APP_ABBREVIATION = 'louhc'
VUE_APP_LOGO = 'louhc'

默认的.env文件配置好后，我们接着配置有特殊需求的.env文件，比如我想让在另一种环境下使用 其他的名字。例如 .env.bsy文件 .bsy是我随便写的名字这块可以自定义。

//这块只需要 VUE_APP_*** 以这样的形式命名就ok了，后面大写还是小写这块看你心情都可以。
VUE_APP_NAME = '白衫云'
VUE_APP_HTTPS = 'http://www.louhc.com:82/'
VUE_APP_ABBREVIATION = 'bsy'
VUE_APP_LOGO = 'bsy'

依次类推你想配置多少个都可以
.env文件配好后我们就该配置运行环境了

如何配置运行环境

找到package.json文件，如下图

build: 和 serve: 后面跟的名字就是你随便起的名字一定要对应上，这在运行的时候才能找到相应的配置项。

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:bsy": "vue-cli-service build --mode bsy",
    "build:kthz": "vue-cli-service build --mode kthz",
    "serve:bsy": "vue-cli-service serve --mode bsy",
    "serve:kthz": "vue-cli-service serve --mode kthz",
  },

再次多说一点：.env是默认配置项，当运行环境配置项的时候，会将默认配置项和运行的环境配置项融合，在参数相同的情况下，会以环境配置项为主，简单来说就是，默认配置项存在，环境配置项也存在，这个时候运行哪个环境配置项，就以哪个环境配置项的值为准，如果默认配置项存在，环境配置项不存在，那么运行环境配置项的时候同样也可以拿到默认配置项的值。

如何获取全局配置项的值

例子：如何我想在js中拿到 VUE_APP_NAME = ‘娄渊洋'，那么这直接在你想赋值的地方写上这行代码即可 process.env.VUE_APP_NAME

console.log(process.env.VUE_APP_NAME)// 默认环境下打印的就是娄渊洋 bsy 环境下就是 白衫云

如果我们项在html中使用全局配置项的值，需要我们先在return 中赋值一下，然后 才可以通过 {{}}，拿到你想要用的值。

如何运行环境

运行默认环境 npm run serve
运行指定的环境 npm run serve:bsy
默认环境打包 npm run build
指定环境打包 npm run build:bsy
只需切换不同的环境名即可

到此这篇关于vue项目多环境配置(.env)的实现的文章就介绍到这了,更多相关vue 多环境配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vue-cli3多环境打包配置

    最近下载了vue-cli3,研究了下vue-cli3下多环境的配置. 首先,安装vue-cli3. npm install -g @vue/cli 安装好之后的项目是这样的,见下图: 相比较vue-cli2的项目,缺少了build和config目录,另外static目录也没了,多了个public目录. 配置文件需要自己写一个vue.config.js,可以参考官方文档文档写,网址 https://cli.vuejs.org/zh/config/ 现在说重点,怎么配置多环境.打开package.j

  • 通过vue-cli来学习修改Webpack多环境配置和发布问题

    通过vue-cli来学习修改Webpack多环境配置和发布问题

    Vue之所以现在如此之火热,一部分也得益于有官方的脚手架生成工具Vue-cli,大大简化了初学者环境搭建的成本,但是实际业务中我们往往需要实现其他的功能来对webpack进行改造,本文将会根据一些实际的业务需求,先学习vue-cli生成的模版,然后在进行相关修改. Vue-cli生成模版文件目录 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.j

  • vue相关配置文件详解及多环境配置详细步骤

    1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件,项目贡献者等等.npm install 命令会根据这个文件下载所有依赖模块. 文件结构如下: { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsa

  • vue-cli3添加模式配置多环境变量的方法

    vue-cli3配置多环境变量 先挂官网描述:环境变量和模式 需求 根据运行环境判断执行代码: 预发环境操作完成跳转地址与线上环境跳转地址不同 线上环境添加埋点脚本 实现 Step1:在项目根目录中新建.env.uat .env.uat配置如下: VUE_APP_BUILD_TYPE=uat vue-cli中规定,只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中. 代码中可以通过 process.env.VUE_APP_SECRET 这

  • Vue多环境代理配置方法思路详解

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了. 第一,很容易引起冲突. 第二,很容易出现代理错误,需要排查.而且现在微服务盛行,在生产环境下有网关配置,不会出错,但是在本地调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很麻烦也很容易出错. 解决思路: 1.开发中定义常量js文件,例如constants.js.用户存放各个服务需要代理的服务名. let api = "" let loginServer = &q

  • vue-cli项目配置多环境的详细操作过程

    vue-cli 默认只提供了 dev 和 prod 两种环境.但其实正真的开发流程可能还会多一个 sit 或者 stage 环境, 就是所谓的测试环境和预发布环境.所以我们就要简单的修改一下代码.其实很简单就是设置不同的环境变量 详细操作过程 1.在 package.json 中添加 test 命令 "scripts": { "dev": "cross-env NODE_ENV=online node build/dev-server.js --host

  • 基于vue cli 通过命令行传参实现多环境配置

    大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 npm

  • vue项目多环境配置(.env)的实现

    vue项目多环境配置(.env)的实现

    目录 什么是多环境配置,为什么要多环境配置? .env 文件配置到哪里 .env文件如何配置,配置多少个? .env文件的配置 如何配置运行环境 如何获取全局配置项的值 如何运行环境 没接触多环境配置前,感觉好高大上,真正操作后感觉也就那么回事,在此把自己遇到的问题和解决方案叙述一下,有不对的地方欢迎各位大佬指出. 什么是多环境配置,为什么要多环境配置? 最常见的多环境配置,就是开发环境配置,和生产环境配置(也就是上线的配置),很多情况下我们开发环境下的域名,和一些配置项,和我们生产模式下的不同

  • Vue项目分环境打包的实现步骤

    在项目开发中,我们的项目一般分为开发版.测试版.Pre版.Prod版.Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦.如果能根据不同环境打包就完美了.网上搜集了许多资料,现在可以分环境打包程序了,至于怎么打,接着住下看吧. 第1步:安装cross-env 在项目目录下运行如下命令安装cross-env,我的ide是webstorm,要以直接在ide里的Terminal窗口中运行,也可能通过windows的CMD.Li

  • 浅析vue给不同环境配置不同打包命令

    第1步:安装cross-env npm i --save-dev cross-env 第2步:修改各环境下的参数 在config/目录下添加test.env.js.pre.env.js. 修改prod.env.js里的内容,修改后的内容如下: 'use strict' module.exports = { NODE_ENV: '"production"', EVN_CONFIG:'"prod"', API_ROOT:'"/apis/v1"' }

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

  • vue新vue-cli3环境配置和模拟json数据的实例

    最近在研究学习vue,发现环境配置特麻烦,就是跟着文档步骤一步一步来,也会遇到各种想不到的坑,vue-cli3的配置比老的简洁了很多,与以往的配置也有所不同: 1.安装步骤以前是 npm install vue-cli -g 现在是: npm install -g @vue/cli 2.vue-cli2 新建项目 vue init webpack Vue-Project vuecli3新建项目,在你创建后会有一个保存当前配置的功能 vue create <project-name> vue-c

  • Vue3之 Vue CLI多环境配置

    Vue3之 Vue CLI多环境配置

    目录 一.前言 二.实现切换 1.增加开发和生产配置文件 2.修改编译和启动支持多环境 3.修改axios请求地址支持多环境 一.前言 这里相对于之前就没那么麻烦了,通俗点说就是使用配置文件来管理多环境,实现环境的切换. 二.实现切换 1.增加开发和生产配置文件 在web的根目录下,创建开发环境切换配置文件.env.dev,内容如下: NODE_ENV=development VUE_APP_SERVER=http://127.0.0.1:8880 在web的根目录下,创建线上环境切换配置文件.

  • Vue安装与环境配置步骤详解

    目录 1.安装node.js 2.查看npm 3.安装npm的国内镜像—cnpm 4.安装webpack(一款开源的前端打包工具) 5.查看webpack是否安装成功 6.安装vue-cli脚手架构建工具 7.创建Vue项目 补充:vue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法 总结 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打

  • Django+Vue跨域环境配置详解

    概述 在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题. 跨域不带Cookie 在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,Vue自带的Server支持 hot reloading ,这个特性是非常好用的.但是在开发过程中,因为要与后端交互,所以在请求后端接口的时候,会遇到跨域问题,这个问题在一些职责划分清楚的团队并不存在,因为前端开发人员会才用Mock数据

  • Vue 项目分环境打包的方法示例

    Vue 项目分环境打包的方法示例

    我们开发项目的时候,用vue-cli 2.x版本新建的项目,只有dev, pro两种开发环境, 有时需要个test环境来给测试使用,所以找了很多方法,总结了个最简单的方法来给大家使用 1.package.json 在build下面添加一个test运行命令 "test": "node build/build.js" 2.prod.env.js 在config -> prod.env.js 中修改代码 'use strict' // 读取系统运行时候的变量 con

  • vue项目实现webpack配置代理,解决跨域问题

    vue项目实现webpack配置代理,解决跨域问题

    目录 webpack配置代理,解决跨域 主要是这句话 vue跨域问题,修改代理后仍404 接口请求用法 webpack配置代理,解决跨域 在config文件夹中的index.js文件配置 主要是这句话 proxyTable: { //本地测试接口       '/': {          target: 'http://xx.xx.xx.xx',          changeOrigin: true,          secure: false      }  }, ​示例代码: modu

随机推荐