vue打测试包和正式包的配置

目的：

npm run build:uat 打测试包（环境：development）
npm run build:prod 打正式包（环境：production）

修改配置：

第一步：修改config/prod.env.js

'use strict'
module.exports = {NODE_ENV: '"production"',EVN_CONFIG:'"prod"'
}

第二步：config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',EVN_CONFIG:'"dev"'
})

第三步：添加config/test.env.js

'use strict'
module.exports = {NODE_ENV: '"development"',EVN_CONFIG:'"test"'
}

第四步：修改config/index.js,修改build那一部分的代码，其他不变

build: {// 添加test、prod环境变量配置prodEnv: require('./prod.env'),testEnv: require('./test.env'),//如果需要通过打包不同的环境变量，打包到不同的文件夹可以这样写,注意用了此处代码需要注释点下面的index和assetsRoot这两个配置// index: path.resolve(__dirname, '../' + process.env.EVN_CONFIG + '_dist/index.html'),// assetsRoot: path.resolve(__dirname, '../' + process.env.EVN_CONFIG + '_dist'),}

第五步：修改build/build.js,注释process.env.NODE_ENV = 'production然后修改spinner。

// 注释这里
// process.env.NODE_ENV = 'production'// 修改这里
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.EVN_CONFIG+ ' mode...' )
spinner.start()

第六步：修改build/webpack.prod.conf.js

// 注释
// const env = require('../config/prod.env')// 新增
const env = config.build[process.env.EVN_CONFIG+'Env']

第七步：修改package.json 打包命令

build:uat 打包测试环境
build:prod 打包正式环境

"build": "cross-env NODE_ENV=production EVN_CONFIG=prod node build/build.js",
"build:uat": "cross-env NODE_ENV=development EVN_CONFIG=test node build/build.js","build:prod": "cross-env NODE_ENV=production EVN_CONFIG=prod node build/build.js"

注意：按照配置修改后，原来的命令 npm run build就不能使用了，所以其也要修改一下配置

第八步：安装依赖

npm install --save-dev cross-env

第九步：运行打包命令

测试环境：npm run build:test
正式环境：npm run build:prod

第十步：获取环境变量

把包放在服务器中访问，process.env.NODE_ENV即可获取到环境变量

完成以上配置就可以按照自己配置的打出不同环境变量的包

vue打测试包和正式包的配置相关推荐

vue cli3 一键 build 区分测试环境和正式环境
vue cli3 打包 build 区分测试环境和正式环境通过自定义环境变量文件进行配置思路: 默认情况下,执行 npm run serve 会以 development 的模式启动执行 npm ...
unipapp 解决无法编译sass_如何解决Vue项目里面没有sassloader依赖包的问题
如何解决Vue项目里面没有sass-loader依赖包的问题 [报错问题] [分析问题] 说明项目里面没有sass-loader依赖包,需要安装dart-sass(即该软件包已被弃用,后来被重命名为& ...
vue 字符串分割_嗯哼vue组件taginput包教不包会
5分钟实现一个Tag-Input(标签)组件前言本文是wo写组件设计的第一篇文章(处女作),之所以会写组件设计相关的文章,是因为作为一名优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就 ...
Vue 3 之什么是解包
Vue 3 之什么是解包前言结合代码分析总结前言从 Vue2 升到 Vue3 之后,用法上有了很大很大的变化 Vue3可以通过 ref 来声明一些响应式数据,可以是 any 类型的响应式数 ...
【测试】Charles抓包
一.Charles 简介 Charles 是一款抓包软件,更专业,可以抓取电脑上所有软件发的包. 抓包原理:charles 自动创建了一个代理,发送数据都要经过代理,同时把所有路过的数据全部展示出来 ...
自学Vue开发Dapp去中心化钱包（三）
前言本篇主要记录学习Vue并实际参与完结web3门户项目的经验和走过的弯路.拖了这么久才来还债,说项目忙那是借口,还是因为个人懒!从自学到实战Vue实际中间就1周的学习熟悉时间,学习不够深就会造成基 ...
linux下udp丢包和传输延迟,如何测试UDP数据包的丢包率和延迟
iperf也可以用于UDP数据包吞吐量.丢包率和延迟指标,但是由于UDP协议是一个非面向连接的轻量级传输协议,并且不提供可靠的数据传输服务,因此对UDP应用的关注点不是传输数据有多快,而是它的丢包率和 ...
Jenkins自动部署测试环境之jar包自动部署
在我们的日常工作中,可能经常会遇到以下问题: 1.测试环境是由开发去更新的,当开发忙于改bug的时候,测试环境更新频率比较低,问题不能得到及时的验证 2.频繁的找开发去更新环境的话 ,耽误别人的工作, ...
linux 内网网络波动检测,Linux内网测试环境模拟网络丢包和延时
本文源自同事分享,在此基础之上做简要修改而成. Linux下有2traffic control(简写TC)和netem这2个工具.Netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功 ...

vue打测试包和正式包的配置

目的：

修改配置：

第一步：修改config/prod.env.js

第二步：config/dev.env.js

第三步：添加config/test.env.js

第四步：修改config/index.js,修改build那一部分的代码，其他不变

第五步：修改build/build.js,注释process.env.NODE_ENV = 'production然后修改spinner。

第六步：修改build/webpack.prod.conf.js

第七步：修改package.json 打包命令

第八步：安装依赖

第九步：运行打包命令

第十步：获取环境变量

完成以上配置就可以按照自己配置的打出不同环境变量的包

vue打测试包和正式包的配置相关推荐

最新文章

热门文章