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


Posted in Javascript onApril 09, 2020

本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下:

官方文档

环境变量

一个环境变量文件只包含环境变量的键值对:

NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/

注意:

  • NODE_ENV - 是 “development”、“production” 、"test"或者自定义的值。具体的值取决于应用运行的模式
  • BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径
  • 除了 NODE_ENV 和 BASE_URL,其他的环境变量必须以 VUE_APP_ 开头
  • 项目中使用:process.env.环境变量名,eg:VUE_APP_BASE_URL

模式

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

  • development 模式用于 vue-cli-service serve
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式用于 vue-cli-service test:unit

注意点:

  • 一个模式可以包含多个环境变量
  • 每个模式都会将环境变量中 NODE_ENV 的值设置为模式的名称
  • 可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
  • 为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级
  • 此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 .env 文件覆写
.env        # 在所有的环境中被载入
.env.local     # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]     # 只在指定的模式中被载入,优先级高于.env和.env.local
.env.[mode].local  # 只在指定的模式中被载入,但会被 git 忽略,优先级高于.env和.env.local

例子:不同模式下,为axios指定不同的baseUrl

创建development模式的环境变量文件,项目根目录下新建.env.development文件

NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/

创建production模式的环境变量文件,项目根目录下新建.env.production文件

NODE_ENV=production
VUE_APP_BASE_URL=/

在src目录下main.js文件中使用环境变量

import Vue from 'vue'
import App from './App.vue'

// 导入axios
import axios from 'axios'
// 设置请求根路径,使用环境变量
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// axios拦截器
axios.interceptors.request.use(config => {
 // 为请求头对象,添加Token验证的Authorization字段
 config.headers.Authorization = window.sessionStorage.getItem('token')
 // 在最后必须return config
 return config
})
// 挂载到vue
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

也可以在其他vue组件中打印

console.log(process.env.NODE_ENV)
console.log(process.env.VUE_APP_BASE_URL)
console.log(this.$http.defaults.baseURL)

运行项目

npm run serve

例子:自定义模式

自定义一个fat模式

在项目根目录下新建环境变量文件.env.fat

NODE_ENV=fat
VUE_APP_BASE_URL=http://fat.com/

根目录下package.json中新增脚本命令

{
 "name": "vue_shop",
 "version": "0.1.0",
 "private": true,
 "scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  // 这条命令是我自定义的,通过--mode指定模式为fat
  "fat": "vue-cli-service serve --mode fat",
  "lint": "vue-cli-service lint"
 },
 "dependencies": {
  "axios": "^0.19.2",
  "core-js": "^3.4.4",
  "echarts": "^4.6.0",
  "element-ui": "^2.4.5",
  "vue": "^2.6.10",
  "vue-router": "^3.1.3"
 },
 "devDependencies": {
  "@vue/cli-plugin-babel": "^4.1.0",
  "@vue/cli-plugin-eslint": "^4.1.0",
  "@vue/cli-plugin-router": "^4.1.0",
  "@vue/cli-service": "^4.1.0",
  "@vue/eslint-config-standard": "^4.0.0",
  "babel-eslint": "^10.0.3",
  "babel-plugin-component": "^1.1.1",
  "eslint": "^5.16.0",
  "eslint-plugin-vue": "^5.0.0",
  "less": "^3.10.3",
  "less-loader": "^5.0.0",
  "vue-cli-plugin-element": "^1.0.1",
  "vue-template-compiler": "^2.6.10"
 }
}

运行命令

npm run fat

这时候项目中读取的,就是fat模式下的环境变量了

到此这篇关于vue cli4下环境变量和模式示例详解的文章就介绍到这了,更多相关vue cli4环境变量和模式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
angularjs实现猜大小功能
Oct 23 Javascript
实例教学如何写vue插件
Nov 30 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 #Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 #Javascript
加速vue组件渲染之性能优化
Apr 09 #Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 #Javascript
You might like
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP开发负载均衡指南
2010/07/17 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php关联数组快速排序的方法
2015/04/17 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python的几种开发工具介绍
2007/03/07 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
django框架F&Q 聚合与分组操作示例
2019/12/12 Python
python中的逆序遍历实例
2019/12/25 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
大学毕业感言50字
2014/02/07 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
2015年党性分析材料
2014/12/19 职场文书
师德承诺书
2015/01/20 职场文书
钢琴师观后感
2015/06/12 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书