vue-cli3 环境设置
vue-cli3默认设置:
使用vue-cli3打包项目,通过配置不同的指令给项目设置不一样的配置。
npm run serve
时会把process.env.NODE_ENV
设置为‘development’;
npm run build
时会把process.env.NODE_ENV
设置为‘production’
此时只要根据process.env.NODE_ENV
设置不同请求url就可以很简单的区分出本地和线上环境。
头疼的是打包时线上环境可能分多种,比如测试环境和生产环境等等。
配置多个环境:
在vue-cli2中打包时可以修改 “build” 和 “config”中的文件来区分不同的线上环境
而vue-cli3号称0配置,无法直接修改打包文件,那么怎么区分不同的线上环境分别传入不一样的配置呢?
官网给我们做了简单介绍(vue-cli-service-build
),但只解释了现有几个指令所匹配的模式,对于上面的需求显然无法满足。
如下提供一种解决方案:
(1)首先在package.json文件内添加测试环境和生产环境的打包指令:
"build-test": "vue-cli-service build --mode alpha","build-prod": "vue-cli-service build --mode prod",
(2)在项目根目录添加两个文件
.env.alpha
NODE_ENV = 'test'VUE_APP_BASE_URL = 'http://test.linbenjian.work'
.env.prod
NODE_ENV = 'production'VUE_APP_BASE_URL = 'http://www.linbenjian.work'
(3)在项目中使用
在项目中使用参数:
import axios from 'axios'let baseurl = process.env.VUE_APP_BASE_URL || 'http://localhost:9001'
注意点:
- —mode后面添加test、production 等预留参数无效
- 配置文件内,参数添加VUE_APP 可通过调试
(4)举例说明
1- package.json添加 “alpha": "vue-cli-service build --mode alpha
”
{···"scripts": {"serve": "vue-cli-service serve", //本地运行,会把process.env.NODE_ENV设置为‘development’"alpha": "vue-cli-service build --mode alpha", // 打包,会把process.env.NODE_ENV设置为步骤2中‘.env.alpha’文件设置的值。// 注意,这里 “--mode 名字“ 要和步骤2中文件名“.env.名字”名字保持一致"build": "vue-cli-service build" //打包, 会把process.env.NODE_ENV设置为‘production’},"dependencies": {··· },···
}
- 在项目根目录添加文件“
.env.alpha
”,其内容:
NODE_ENV = ‘alpha‘
- 添加‘
setBaseUrl.js
’用来设置url(或者在vue.config.js 中设置),其内容:
let baseUrl: string = ""; //这里是一个默认的url,可以没有
switch (process.env.NODE_ENV) {case 'development':baseUrl = "http://localhost:57156/" //这里是本地的请求urlbreakcase 'alpha': // 注意这里的名字要和步骤二中设置的环境名字对应起来baseUrl = "http://www.cnblogs.com/XHappyness/" //这里是测试环境中的urlbreakcase 'production':baseUrl = "https://www.cnblogs.com/XHappyness/p/7686267.html" //生产环境urlbreak
}export default baseUrl;
4.在请求中引入设定的url,我这里用的是axiso,所以在axios的配置文件中引入并使用
import axios from 'axios'
import baseUrl from './setBaseUrl.js'axios.defaults.withCredentials = true;
axios.defaults.baseURL = baseUrl;····
vue-cli3 环境设置相关推荐
- vue cli3 一键 build 区分测试环境和正式环境
vue cli3 打包 build 区分测试环境和正式环境 通过自定义环境变量文件进行配置 思路: 默认情况下,执行 npm run serve 会以 development 的模式启动 执行 npm ...
- vue cli3 绑定域名_使用CLI设置WildFly绑定地址并关闭
vue cli3 绑定域名 仅使用命令行参数将WildFly绑定到主机名/ IP上非常容易. 我有一个简单的GNU / Linux盒子,可以用它玩各种东西,其中之一就是WildFly. 我使用以下命令 ...
- Vue项目实战:接口错误拦截与环境设置
(一)接口错误拦截 使用场景: 统一报错 未登录拦截 请求值.返回值统一处理 使用axios插件进行拦截: 安装axios npm i axios --save-dev 在main.js文件中加入: ...
- vue cli3 打包build 区分测试环境和正式环境
vue cli3没有了和之前vue cli2一样的配置文件, 但项目中 经常会有测试环境和生产环境,经常不同环境的域名是不一致的,因为build构建打包时,process.env.NODE_ENV默认 ...
- vue cli3.0打包上线不同环境
vue cli3.0打包上线不同环境 1. cli3.0支持".env"文件配置,在项目的根目录下配置".env"文件,根据不同的环境命名不同的文件名称,如: ...
- vue cli3 配置sass全局变量设置不生效,sass混合器文件全局引入
vue cli3 配置sass全局变量的问题 首先确保依赖安装完整 找到vue.config.js加入配置信息 首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style ...
- Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置 配置优化 一.js文件最小化处理 二.分割代码 三.图片资源压缩 四.开启gzip压缩 先看一下优化配置之前的文件大小 通过vue-cli3脚 ...
- vscode搭建vue开发环境(vue入门)
本文基于vue2.0版本,文末说明怎么升级为vue3.0版本 一.安装VScode 从官网下载,安装就行.以下操作在win+r -> cmd 命令行界面执行.在vscode中就是在创建好的项目空 ...
- cli vue 卸载,vue Cli 环境删除与重装教程 - 版本文档
vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 3.0+版本,使用的不是vue-cli,而是@vue/cli: 如果用以上的安装 ...
- Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
最新文章
- segformer 使用笔记
- C语言 矩阵的几种乘法
- leetcode - two-sum
- 动态网页中隐藏url参数传递的方法
- 『Linux基础 - 4 』linux常用命令(1)
- 国王的游戏(华东师范大学-信息学竞赛学教案)
- Ajax判断用户名是否可用
- 《Python编程从入门到实践》记录之range、min、max、sum函数
- Spring容器,控制反转,依赖注入
- ICE通信之IceGrid服务(一)
- iOS CocoaPods自动管理第三方开源库
- 拓端tecdat|Python实现谱聚类Spectral Clustering算法和改变簇数结果可视化比较
- 警告解决办法:class xxxx has virtual method but non-virtual destructor
- android pickerview 多行,Android PickerView实现三级联动效果
- Google Cloud API设计指南
- 英语四级单选测试软件,英语四级报告单选纸质还是电子?选择电子版报告单可能更好...
- requests库安装和简单功能学习总结
- DEDE调用指定文章ID
- QT Connect/Disconnect
- 腾达路由器linux开发,Linux内核系统! 腾达8口路由器功能超强