Vue cli3配置生产环境,开发环境,和测试环境
目录
1、先在package.json文件中添加:
2、在项目目录下建立 .env文件和.env.test文件
3、配置api变量
3.1、配置axios的baseURL路径
3.2、自己拼接的路径
4、.env知识点补充
4.1,关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件
4.2,关于内容
4.3,关于文件的加载:
4.4,关于.env文件的读取:
前言
通过不同命令行切换不同环境api等信息
例如:
npm run serve调用本地环境api
npm run test 调用测试环境api
npm run build 调用线上环境api
1、先在package.json文件中添加:
"scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","preview": "serve dist","test": "vue-cli-service build --mode test","production": "vue-cli-service build --mode production","development": "vue-cli-service build --mode development"},
知识点补充:
参数的名字可以根据跟人喜好来定义
vue cli 3
yarn serve \ npm run serve 是运行代码。
build是打包代码
而我们打包的时候,就把serve运行变成开发环境,build打包变成生产环境。
—mode后面添加test,是运行.env.test
没有加的情况下,serve是自动默认.env.development
build是自动默认.env.production
2、在项目根目录下建立 .env文件、.env.test、.env.development文件、.env.production文件
2.1、.env文件
NODE_ENV = 'development'
VUE_APP_URL = 'dev'
2.2、.env.test文件
# 用来表示是生产环境还是开发环境
NODE_ENV = 'production'
# 用来表示是生产环境还是测试环境
VUE_APP_FLAG = 'test'
# 这个地址不能带引号,不然获取的就带引号
# 测试环境
VUE_APP_BASE_URL = http://testjfssso.ouyeelf.com/sso
# 用来表示打包的名字
outputDir = test
2.3、.env.development文件
# 页面标题
VUE_APP_TITLE = sso-web# # 项目版本号
VUE_APP_VERSION = V1.0# 开发环境配置
NODE_ENV = 'development'VUE_APP_FLAG = 'development' # 开发环境
VUE_APP_BASE_URL = http://10.60.36.245:8080/sso
2.4、.env.production文件
#页面标题
VUE_APP_TITLE = 'sso-web'# 项目版本号
VUE_APP_VERSION = V1.0# 生产环境配置
NODE_ENV = 'production'VUE_APP_FLAG = 'production'# 正式环境
VUE_APP_BASE_URL = https://jfsso.ouyeelf.com/sso
知识点补充:
请看4
2.5、在vue.config.js文件中添加:
outputDir: process.env.outputDir,
3、配置api变量
这里配置需要因代码而异
module.exports = {// 部署应用时的基本 URL// 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath// 基本路径,相对路径 或其他别名publicPath: process.env.NODE_ENV === "production" ? "./" : "./",// 输出文件目录outputDir: 'dist',// ...}
配置axios的baseURL路径
那么我们需要在main.js里面,配置axios的baseURL,根据不同的环境配置不同的代码
/*第一层if判断生产环境和开发环境*/
if (process.env.NODE_ENV === 'production') {/*第二层if,根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/if (process.env.VUE_APP_FLAG === 'production') {//production 生产环境axios.defaults.baseURL = 'https://jfsso.ouyeelf.com/sso';} else {//test 测试环境axios.defaults.baseURL = 'http://testjfssso.ouyeelf.com/sso';}
} else {//serve 开发环境axios.defaults.baseURL = 'http://10.60.36.245:8080/sso';
}
4、.env知识点补充
4.1,关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件
.env 全局默认配置文件,不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
4.2,关于内容
注意:属性名必须以VUE_APP_开头,比如设置其它变量 VUE_APP_NAME=stark
4.3,关于文件的加载:
根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”
比如执行npm run serve命令,会自动加载.env.development文件
注意:.env文件无论是开发还是生成都会加载的公用文件
如果我们运行npm run serve 就先加载.env文件,之后加载.env.development文件,两个文件有同一个项,则后加载的文件就会覆盖掉第一个文件,也即是.env.development文件覆盖掉了.env文件的NOOE_ENV选项。
如果我们需要加载私有的情况下,可以像test一样,-mode test ,当我们运行的时候,就是运行env.test文件
4.4,关于.env文件的读取:
可以通过index.vue\index.js process.env 获取设置的变量
Vue cli3配置生产环境,开发环境,和测试环境相关推荐
- 保姆级教程:Linux(Ubuntu 18.04)下VSCode配置与嵌入式开发平台X2000_Halley5调试环境搭建
保姆级教程:Linux(Ubuntu 18.04)下VSCode配置与嵌入式开发平台X2000_Halley5调试环境搭建 写在前面 配置VSCode的编译环境 配置VSCode的gdb调试环境 配置 ...
- vue cli3 配置sass全局变量设置不生效,sass混合器文件全局引入
vue cli3 配置sass全局变量的问题 首先确保依赖安装完整 找到vue.config.js加入配置信息 首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style ...
- 什么是测试环境?如何搭建测试环境?
测试进行软件测试的之前,需要搭建好测试环境.那什么是测试环境呢? 简单的说就是软件运行的平台,即软件.硬件和网络三种环境的合集,也就是说:测试环境=软件+硬件+网络 硬件:包括PC机. ...
- vue项目配置生产、测试和开发环境
目前的 web 项目开发基本都是基于前后端分离的模式. 在实际的开发过程中,从开发到测试完成.发布到线上所调用到的接口地址可能都不一样,那就需要在项目中分别配置各个环境的接口地址(或者域名,也可以定义 ...
- 微信小程序从本地开发环境到线上测试环境和生产环境的配置
这篇文章是对慕课网mpvue实战项目视频过程中环境的配置的总结与更新(因为小程序文档时不时就更新) 项目源码:https://github.com/suhuashan/bookCommentSyste ...
- vue/cli3 配置vux
安装各插件 试过 安装"必须安装"的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install ...
- vue配置生产环境.env.production、测试环境.env.development
静下来 慢慢看 首先 我们需要搭建一个项目 依赖包会自动下载好 无需自己 npm i .env 无论什么环境都会加载 .env.production 生产环境加载 .env.development 测 ...
- vue自带开发环境,生产环境,自己搭建测试环境
git 码云地址: https://gitee.com/qichangshui_admin/vueAddTest 参考地址: https://www.jianshu.com/p/bfcfe5fc253 ...
- 安卓驱动开发(五)----搭建开发板的测试环境
在第四章中,介绍的是安卓应用程序开发环境和linux内核开发环境.这两套开发环境都是linux开发和测试的前提.有了两套开发环境,接下来就应该考虑,测试好的linux驱动应该在哪里运行,运行环境是什么 ...
最新文章
- 谷歌提出「卷积+注意力」新模型,超越ResNet最强变体
- 逆向python生成的可执行文件
- 关键字搜索 c语言,c语言-以关键字搜索程序
- Lab 6:uC/OS II
- python2中xrange比range优点_【Python面试】 说说Python中xrange和range的区别?
- 我们都在努力做自己,我的编程之路开篇
- mysql 下载教程_MySQL下载安装详情图文教程
- Unity Invoke 函数调用
- Java - BeanUtils.copyProperties 与 PropertyUtils.copyProperties 用法及区别
- Python常用取整函数
- 栈与队列篇:347. 前 K 个高频元素(难度 中等)
- 支付宝"手机网站支付"主域名申请了,二级域名还要申请吗
- SysML 第一讲:SysML简介
- 数学建模(六) 主成分分析,聚类分析,对策论,马氏链
- 【MMDetection 源码解读之yolov3】Neck - FPN
- 8421码5421码2421码余3码
- 电影解说都是怎么配音的?电影解说配音实战教程
- Android开发-在Android应用里嵌入腾讯广告联盟进行盈利实现
- 二、操作系统基本原理
- layui点击表格图片放大