vue-cli3.0 环境变量与模式配置方法

vue-cli3.0移除了配置文件目录： config和build文件夹。可以说是非常的精简了，那移除了配置文件目录后如何自定义配置环境变量和模式呢?

为什么需要配置环境变量和模式呢？

所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。

环境变量

cli-3.0总共提供了四种方式来制定环境变量：

1.在根目录添加.env文件，配置所有情况下都会用到的配置（不知道这个存在的意义，所有的都需要的也就不需要配置了吧）。

2.在根目录添加.env.local 文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。

3.在根目录添加.env.[mode] 文件，配置对应某个模式下的配置,比如：.env.development来配置开发环境的配置。

4.在根目录添加.env.[mode].local文件，配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效，该文件不会被git跟踪。

在文件中，我们只需要以key=value的方式就可以设置变量了。

例如：

FOO=bar
VUE_APP_SECRET=secret

环境变量的使用

设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用，限制也不一样。

1.在项目中，也就是src中使用环境变量的话，必须以VUE_APP_开头。例如我们可以在main.js中直接输出：console.log(process.env.VUE_APP_SECRET)

2.在webpack配置中使用，没什么限制，可以直接通过process.env.XXX来使用

3.在public/index.html中使用的：分三类：（没怎么用过）

 <%= VAR %> 用于非转换插值 例如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >`
 <%- VAR %> 用于HTML转义插值
 <% expression %> 用于JavaScript控制流

模式

模式是Vue CLI项目中的一个重要概念。默认情况下，Vue CLI项目中有三种模式：

1.development：在vue-cli-service serve下，即开发环境使用

2.production：在vue-cli-service build 和vue-cli-service test:e2e下，即正式环境使用

3.test： 在vue-cli-service test:unit下使用

另外，如果你想要修改模式下默认的环境变量的话可以通过--mode来实现，例如：

 "dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了，为什么需要有模式的存在，这里我没查到详细的文档，个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同，在development自动注入devtoolPlugin插件，利于开发，而在production中检测到错误不会进行console。

举例

说完了概念，可能还是比较模糊，可以试着添加一个stage环境，用来模拟预上线。

首先在package.json添加一种类型，并修改默认环境变量为stage环境变量

在根目录下创建.env.stage文件，来声明变量：

这里声明的NODE_ENV = ‘production'用来表示这是生产环境。VUE_APP_CURRENTMODE为项目变量，outputDir为除数打包后文件的地址。
在vue.config.js中使用环境变量，制定输出文件为环境变量配置的文件：

最后执行命令yarn stage能看到根目录下生成了stage文件：

这样我们就配置完了stage环境。详细的项目地址可以参考：以vue-cli3.0为基础，结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo

参考文档：Environment Variables and Modes

总结

以上所述是小编给大家介绍的vue-cli3.0 环境变量与模式配置方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 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-cli3环境变量与分环境打包的方法示例

    第一步 : 了解环境变量概念 我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略 环境变量文件只包含环境变量的"键=值"对: FOO=bar VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用 除

  • vue-cli3.0如何使用CDN区分开发、生产、预发布环境

    前言:上一篇记录文vue-cli 3.0 build包太大导致首屏过长的解决方案中提到了CDN优化,之前是直接在html中手动注入JS,也没有对开发和生产模式进行区分,因为是使用收费的CDN,所以在开发模式会遇到无权使用CDN的问题.要是使用CDN写死在html中,不同环境需要手动的切换CDN,那么早晚有一天会搞乱,下面就说说怎么在vue-cli 3.0 中根据不同环境动态注入CDN. 1. 修改public/index.html 通过htmlwebpackplugin动态注入脚本和样式,ind

  • 通过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新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

  • 详解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-cli3.0 环境变量与模式配置方法

    vue-cli3.0 环境变量与模式配置方法

    vue-cli3.0移除了配置文件目录: config和build文件夹.可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢? 为什么需要配置环境变量和模式呢? 所有方法肯定是来源于现实的需求.在一个产品的前端开发过程中,一般来说会经历本地开发.测试脚本.开发自测.测试环境.预上线环境,然后才能正式的发布.对应每一个环境可能都会有所差异,比如说服务器地址.接口地址.websorket地址-- 等等.在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来

  • vue cli4下环境变量和模式示例详解

    本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con

  • 深入浅析vue全局环境变量和模式

    我们可以在项目根目录中的下列文件来指定环境变量: .env                # 在所有的环境中被载入 .env.local          # 在所有的环境中被载入,但会被 git 忽略 .env.[mode]         # 只在指定的模式中被载入 .env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略 一个环境文件只包含环境变量的"键=值"对,并且必须以VUE_APP开始: FOO=bar     //无效 VUE_APP_SE

  • Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

  • vue cli3.0打包上线静态资源找不到路径的解决操作

    项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require

  • linux下配置jdk环境变量的三种方法总结

    一.修改/etc/profile文件当本机仅仅作为开发使用时推荐使用这种方法,因为此种配置时所有用户的shell都有权使用这些环境变量,可能会给系统带来安全性问题.用文本编辑器打开/etc/profile,在profile文件末尾加入:JAVA_HOME=/usr/share/jdk1.5.0_05 PATH=$JAVA_HOME/bin:$PATH CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar export JAVA_HO

  • Vue cli3.0创建Vue项目的简单过程记录

    Vue cli3.0创建Vue项目的简单过程记录

    创建Vue项目 在要创建项目的文件夹下面打开Powershell窗口 输入命令 vue create 项目名称 选择第二项 回车后 选择是否使用历史路由 no 回车 选择 Less 回车 选择第三个 回车 选择第一个 回车 选择第一个 回车 是否保存模板 选择no 完成啦 完成 总结 到此这篇关于Vue cli3.0创建Vue项目的文章就介绍到这了,更多相关Vue cli3.0创建Vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • mysql 8.0.16 winx64.zip安装配置方法图文教程

    本文为大家分享了mysql 8.0.16 winx64.zip安装配置方法的具体代码,供大家参考,具体内容如下 下载zip安装包: MySQL8.0 For Windows zip包下载地址,进入页面后可以不登录.后点击底部"No thanks, just start my download."即可开始下载.或直接下载 环境:Windows 10 一.安装 1.1.解压zip包到安装目录 比如我的安装目录是:C:\Program Files\MySQL 1.2.配置文件 在Window

  • Anaconda+Pycharm环境下的PyTorch配置方法

    写给新手的话 pycharm是什么,为什么让我指定interpreter 记事本 最开始写C语言代码的时候,人们使用vi,记事本等软件写代码,写完了之后用GCC编译,然后运行编译结果,就是二进制文件.python也可以这样做,用记事本写完代码,保存成如test.py的文件后,通过命令python test.py可以运行这一文件.最初的C语言代码都是通过这种方式写的.但是人们很快发现了一个问题,就是这么弄太麻烦了,编写用vi,运行得切出去用shell,出错了再切回vi改代码.这要是编写.运行.调试

  • php在apache环境下实现gzip配置方法

    本文实例讲述了php在apache环境下实现gzip配置方法.分享给大家供大家参考.具体如下: 1.conf/httpd.conf 1) 去掉#LoadModule headers_module modules/mod_headers.so前面的注释#, 2) 添加LoadModule deflate_module modules/mod_deflate.so, 3) 去掉#Include conf/extra/httpd-vhosts.conf前面的注释#.   2.conf/extra/ht

随机推荐