vue-cli3构建和发布 实现分环境打包步骤(给不同的环境配置相对应的打包命令)
https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E6%9E%84%E5%BB%BA
console.log(process.env.VUE_APP_***) // 环境变量
console.log(process.env.NODE_ENV) //环境
1.在vue-cli3的项目中, process.env.NODE_ENV 为当前环境
npm run serve时 process.env.NODE_ENV 为 ‘development’; //开发环境
npm run build 时 process.env.NODE_ENV 为 ‘production’; //生产环境
此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出 本地和线上环境。
但是在线上环境又分为 测试环境,预生产环境,生产环境,这时候就要在线上环境的条件下添加环境变量来区分
2. 在项目根目录添加文件“.env.test”和“.env.pre”
所有测试环境或者正式环境变量的配置都在 .env.development等 .env.xxxx
文件中
注意!!!
环境变量必须以 VUE_APP_
为开头。如:VUE_APP_API
、VUE_APP_TITLE
你在代码中可以通过如下方式获取环境变量:
console.log(process.env.VUE_APP_xxxx)
两个文件中
.env.test:
NODE_ENV = 'production'
VUE_APP_WISEYEAPP_ENV_NAME = 'test' //环境变量
.env.pre
NODE_ENV = 'production'
VUE_APP_WISEYEAPP_ENV_NAME = 'pre' //环境变量
VUE_APP_OUTPUT_DIR = 'preDist'
3. package.json中打包命令:
{
···
"scripts": {
"serve": "vue-cli-service serve", //本地运行,会把process.env.NODE_ENV设置为‘development’
"build:test": "vue-cli-service build --mode test", // 注意,这里 “--mode 名字“ 要和步骤2中文件名 “.env.名字” 名字保持一致
"build:pre": "vue-cli-service build --mode pre"
},
"dependencies": {
···
},
···
}
4. 然后 api/config.js里
const BaseConfig = {
dev: {
BaseUrl: 'http://191.168.1.1/dev'
},
test: {
BaseUrl: 'http://191.168.1.1/test'
},
pre: {
BaseUrl: 'http://191.168.1.1/pre'
}
} let BaseUrlConfig = BaseConfig.dev
if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_WISEYEAPP_ENV_NAME === 'test') { //区分环境和环境变量
// 测试环境
BaseUrlConfig = BaseConfig.test
} else if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_WISEYEAPP_ENV_NAME === 'pre') {
// 预生产环境
BaseUrlConfig = BaseConfig.pre
}
export default BaseUrlConfig
5. 项目里 接口.js 文件里引用就好了
import request from '@/utils/request'
import BaseUrlConfig from '@/api/config'
或者 (在请求中引入设定的url,用的是axios,所以在axios的配置文件中引入并使用)
import axios from 'axios'
import baseUrl from './constans' axios.defaults.withCredentials = true;
axios.defaults.baseURL = baseUrl; ····
6. 分析构建文件体积
npm run preview -- --report
执行命令后本地会生成一个dist包,传统的打包dist里面只有一个index.html,而这个会多一个report.html,打开这个HTML文件
运行之后你就可以在 http://localhost:****/report.html 页面看到具体的体积分布
vue-cli3构建和发布 实现分环境打包步骤(给不同的环境配置相对应的打包命令)的更多相关文章
- [转]MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题)
MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题) 网上有一篇shangdong_chu网友写的文章介绍如何在Eclipse上配置M ...
- vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下: ...
- Vue 项目构建完成 ----发布项目
发布项目 cmd 命令行 npm run build 执行打包文件 完成后就会有 3 个文件夹 分别是: 文件夹 :build config dist in ...
- vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)
在vue-cli3的项目中,npm run serve时会把process.env.NODE_ENV设置为‘development’:npm run build 时会把process.env.NODE ...
- vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除
一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...
- 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求
最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...
- Hadoop分布环境搭建步骤,及自带MapReduce单词计数程序实现
Hadoop分布环境搭建步骤: 1.软硬件环境 CentOS 7.2 64 位 JDK- 1.8 Hadoo p- 2.7.4 2.安装SSH sudo yum install openssh-cli ...
- Github配合Jenkins,实现vue等前端项目的自动构建与发布
本篇文章前端项目以vue为例(其实前端工程化项目的操作方法都相同),部署在Linux系统上(centos). 之前做前端项目的部署,一直都是手动运行打包命令,打包完.再使用FTP.Xshell等这类的 ...
- vue cli3.0 封装组件全局引入js文件并发布到npm
首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...
- Vue CLI3和Vue CLI2环境搭建
关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...
随机推荐
- QT网络编程【二】【Socket】
1.QT中添加socket 库的相关操作 2.正常c++11 VS2019使用socket库的操作 3.winsock2 与 sys/socket.h的区别? 4.WinSock2 的基本操作? 详细 ...
- CentOS查看已安装的服务与卸载服务。。
1:使用rpm查看, rmp -qa | grep servername rpm -qa 查看以安装的所有服务,grep过滤我们需要看的服务. 2:使用yum查看<此命令恕在下未能完全理解,可能 ...
- LaravelORM 中的 withSum , withAvg, withMax,withMin 的实现
Orm::withCount(['relation as relation_sum' =>function($query){ $query->select(DB::raw("su ...
- Nginx http 文件服务器 中文名称文件乱码以及不能访问下载问题 (解决全过程)
书接上文: 在Windows 环境下使用 Nginx 搭建 HTTP文件服务器 实现文件下载 全步骤(详细) _ 发现的中文乱码问题,终于自己解决了! ^_^ Nginx http 文件服务器 中文名 ...
- Qt 学习笔记 - 第五章 - Qt 时间编程 - Qt 时钟
原文地址:Qt 学习笔记 - 第五章 - Qt 时间编程 - Qt 时钟 Qt 学习笔记全系列传送门: Qt 学习笔记 - 第一章 - 快速开始.信号与槽 Qt 学习笔记 - 第二章 - 添加图片.布 ...
- PMP常见会议小结
转载请注明出处: 会议是吸引项目团队和其他干系人参与的重要方式.它们是整个项目的主要沟通方式. 一. 项目启动会 召开时间:是启动阶段结束时召开的会议. 主要任务:发布项目章程,并任命项目经理,赋予项 ...
- Linux文件上传下载--rz/sz命令
原文地址:https://www.cnblogs.com/igoodful/p/14694038.html 1.rz 命令 1.1 命令简介 rz 命令(Receive ZMODEM),使用 ZMOD ...
- Rainbond PipeLine插件部署与springboot应用部署实践
前言:上一篇介绍额rainbond单机部署+单个节点的k8s环境搭建,本篇介绍rainbond5.12新增的pipeline插件的使用 1.Pipeline插件的安装 安装gitlab与gitlab- ...
- Scanner进阶用法
Scanner进阶用法 判断是否为整数,浮点数 package charpter2; import java.util.Scanner; public class Scanner3 { public ...
- 分布式缓存的一致性 Hash 算法
一.使用一致性 Hash 算法的原因 简单的路由算法可以使用余数 Hash:用服务器数据除缓存数据 KEY 的 Hash 值,余数为服务器列表下标编码.这种算法可以满足大多数的缓存路由需求.但是,当分 ...