vue-cli 根据不同的环境打包
根据项目需要,通过vue-cli中的npm run build 打包到不同的环境,例如测试环境,预发布环境,线上环境,根据process.env分别进行接口的调用
vue-cli 中build中build.js
require('./check-versions')() // process.env.NODE_ENV = 'production' var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf') var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
// var spinner = ora('building for production...')
// spinner.start()
build中webpack.prod.conf.js
const env = config.build[process.env.env_config+'Env']
// const env = process.env.NODE_ENV === 'testing'
// ? require('../config/test.env')
// : require('../config/prod.env')
config中的index.js
module.exports = {
build: {
prodEnv: require('./prod.env'), // 线上环境
sitEnv: require('./sit.env'), // 测试环境
ppeEnv: require('./ppe.env'), // 预发布环境
……
config中 dev.env.js
开发环境用的是测试接口,通过merge进行拷贝
var merge = require('webpack-merge')
var sitEnv = require('./sit.env') module.exports = merge(sitEnv, {
NODE_ENV: '"development"'
})
在config中新建sit.env.js、ppe.env.js
module.exports = {
NODE_ENV: '"sitEnvironment"',
ENV_CONFIG: '"sit"',
BASE_API: '"http://*****"' // 测试环境地址
}
module.exports = {
NODE_ENV: '"ppeEnvironment"',
ENV_CONFIG: '"ppe"',
BASE_API: '"http://******"' // 预发布环境地址
}
安装cross-env
npm install cross-env -D
package.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
"build:ppe": "cross-env NODE_ENV=ppeEnvironment env_config=ppe node build/build.js",
"build:sit": "cross-env NODE_ENV=sitEnvironment env_config=sit node build/build.js",
"lint": "eslint --ext .js,.vue src","test": "npm run lint"
},
打包时候我们只需要
npm run build:sit // 测试环境
npm run build:ppe // 预发布环境
npm run build:prod // 线上环境
vue-cli 根据不同的环境打包的更多相关文章
- 基于Vue + webpack + Vue-cli 实现分环境打包项目
需求由来:我公司项目上线发布至服务器分为三个环境分别为测试环境.预发布环境.生产环境:前期做法是项目通过脚步打包时由脚步把域名和后缀名之类的全部替换成要发布的环境所需要的,因为我公司的项目比较大由许许 ...
- vue cli2.x配置多环境打包
一.安装 npm install --save-dev cross-env 二.配置步骤 1.修改config下的文件 //test.env.js 'use strict' module.export ...
- Vue项目根据不同运行环境打包项目
前提 项目是直接通过 vue-cli脚手架 生成的: 假设在项目开发中,分为三个环境 -- · 测试环境· 预生产环境· 生产环境 每个环境的接口地址都是不同的,而 vue-cli 给出的环境只有 d ...
- Vue+webpack项目的多环境打包配置
背景:由于需要将应用部署到线上开发环境.线上测试环境.线上预发环境.线上生产环境,而每个环境的访问地址是不同的.如果每次更改请求地址未免有些繁琐,就考虑在本地进行一次性配置. 代码管理工具:git 代 ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
- vue cli 3 打包过大问题
vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- vue 多环境打包
https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F 模式 模式是 Vue CLI 项目中一个重要的概念.默认情况下, ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- 前端自动分环境打包(vue和ant design)
现实中的问题:有时候版本上线的时候,打包时忘记切换环境,将测试包推上正式服务器,那你就会被批了. 期望:在写打包的命令行的时候就觉得自己在打包正式版本,避免推包时候的,不确信自己的包是否正确. 既然有 ...
随机推荐
- 自定义alert弹框,去掉IP以及端口号提示
最新版例子~~ 如果同时多个弹框,只显示第一个 <!DOCTYPE html> <html lang="en"> <head> <met ...
- sync.Once 使用及解析
目录 前言 1. sync.Once 简介 2. sync.Once 源码解析 2.1 为什么 done 作为第一个字段 2.2 Do 方法的实现细节 2.3 其他重要细节 3. sync.Once ...
- 基于APIView写接口
一.视图层代码 """ 基于APIView实现接口的编写 用的是同一个模型表 路由也没变 这次做了解耦合 写了序列化类 与视图类分开了 """ ...
- 明解STM32—GPIO理论基础知识篇之基本结构
一.前言 万物皆有源头,大家学习单片机的源头操作就是通过GPIO口点灯,GPIO作为STM32最基础的外设,也是大家最先接触的外设.当然,看似基础的GPIO,不仅仅是简单的设置好IO口,让灯亮起就 ...
- UBUNTU切换内核
查询可更换内核的序号 gedit /boot/grub/grub.cfg查询已安装的内核和内核的序号.找到文件中的menuentry (图中在一大堆fi-else底下)menuentry底下还有 ...
- EPICS Archiver Appliance在Debian11下安装文档
本文很想标注转发,可是要转发链接,只好标注原创. 首先声明:本文档是合肥光源控制组孙晓康博士踩坑后整理的.我尝试过在Debian11和Rocky下安装,碰到坎过不去,这段时间各种事就没继续了,请教晓康 ...
- Hugging Face 每周速递: 扩散模型课程完成中文翻译,有个据说可以教 ChatGPT 看图的模型开源了
每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...
- golang拾遗:实现一个不可复制类型
这是golang拾遗系列的第六篇.这个系列主要用来记录一些平时不常见的知识点,偶尔也会实现些有意思的小功能,比如这篇. golang拾遗系列目录: golang拾遗:指针和接口 golang拾遗:为什 ...
- 软件教程 | Jupyter&stata之stata_kernel攻略
![](http://mdimg.yxj1010.top/xlbxs_ydt2.png) 目录: 目录 一.什么是stata_kernel 1. stata_kernel简介 2. 为什么要使用sta ...
- 【USACO 2021 February Contest, Platinum】Problem 1 No Time to Dry
\(\text{Solution}\) 一个点可与另一个颜色相同点同时涂色当且仅当两点间颜色都大于等于这两点 那么我们可以预处理一个点向左向右最远能到的位置,记为 \(l_i,r_i)\) 当 \(l ...