@vue/cli3+配置build命令构建测试包&正式包
上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name)
通过@vue/cli构建的项目无build和config配置文件夹,采用vue.config.js替代
项目中常分为开发环境、测试环境、正式环境,通常不同环境使用的服务端请求地址或一些资源文件是不同的,区分开发环境和(测试正式环境)可使用process.env.NODE_ENV来判断('development'/'production')但是通过npm run build构建的环境(测试环境和正式环境)的process.env.NODE_ENV都是production,要做区分判断通常在每次打包都手动去修改一些配置文件或通过判断域名等信息来区分,这是很不方便的,我们可以通过配置build命令来解决这个问题
在根目录下新建.env.build(正式)和.env.test(测试)两个文件,两个文件都声明变量NODE_ENV = 'production',此时使用另一个变量VUE_APP_CURRENTMODE来区分测试、正式环境
outputDir为打包文件存放的文件夹
此时代码中可通过process.env.NODE_ENV和process.env.VUE_APP_CURRENTMODE两个变量来区分这三个环境做对应的变化
然后配置package.json中script脚本命令
npm run serve / npm run dev运行本地开发环境对应process.env.NODE_ENV = 'development'
npm run build:prod构建正式环境包,文件存放在dist文件夹内
npm run build:test构建测试环境包,文件存放在test文件夹内
npm run publish同时构建测试环境和正式环境包
修改vue.config.js中outputDir: process.env.outputDir
然后运行相关命令就可以了,这样就不需要每次打包去修改配置或通过代码判断域名等信息了
注:
每次build时都会自动清除上一次的打包的整个文件夹(dist/test)然后在打包完成时重新构建这两个文件夹,通过加--no-clean参数可取消该默认行为
注:
若在打包过程中出现该警告,表示打包文件过大
可修改vue.config.js
configureWebpack: config => {
...
return {
performance: {
"maxEntrypointSize": 10000000,
"maxAssetSize": 30000000
}
};
}
@vue/cli3+配置build命令构建测试包&正式包的更多相关文章
- vue-cli2.x配置build命令构建测试包&正式包
项目开发中常分为开发环境.测试环境.正式环境 通过vue-cli或者@vue/cli脚手架搭建的项目默认提供了开发环境和正式环境的配置.可通过js获取当前域名或其他信息来判断当前为测试环境还是正式环境 ...
- vue cli3配置开发环境、测试环境、生产(线上)环境
cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...
- vue/cli3 配置vux
安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...
- vue/cli3 配置相对路径
根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirna ...
- vue cli3.0 build 打包 的 js 文件添加版本号 解决 js 缓存问题
在 vue.config.js 的文件中加入下面这段话 // vue.config.jsconst Timestamp = new Date().getTime();module.exports = ...
- vue cli3.0 build 打包 的 js 文件添加时间戳 解决 js 缓存问题
// vue.config.jsconst Timestamp = new Date().getTime();module.exports = { configureWebpack: { // web ...
- vue cli3 配置postcss
1.安装postcss-import,postcss-cssnext 包 2.修改package.json 将postcss响应的内容替换为 "postcss": { " ...
- 4.0、Android Studio配置你的构建
Android构建系统编译你的app资源和源码并且打包到APK中,你可以用来测试,部署,签名和发布.Android Studio使用Gradle,一个高级的构建套件,来自动化和管理构建进程,同时可以允 ...
- Dubbo入门到精通学习笔记(十四):ActiveMQ集群的安装、配置、高可用测试,ActiveMQ高可用+负载均衡集群的安装、配置、高可用测试
文章目录 ActiveMQ 高可用集群安装.配置.高可用测试( ZooKeeper + LevelDB) ActiveMQ高可用+负载均衡集群的安装.配置.高可用测试 准备 正式开始 ActiveMQ ...
随机推荐
- 获取bootstrap模态框点击的对应项(e.relatedTarget.dataset)
//获取绑定的自定义属性值<ul> <li data-toggle="modal" data-index="电表1111" data-targ ...
- 使用cookie/session实现简单的用户信息的保存
cookie一般用来存储非关键信息 , 用户名和密码等敏感信息一般采用session 来存储:cookie和session的最大区别是当服务器端存储session 之后,用户再次请求时候只是请求了一个 ...
- pytest-mark 参数化
在类前或用例前用pytest.mark.parametrize ,可进行参数化 传参方式比较灵活,有很多种,下面是列出的几种方式,其他的可自行研究 @pytest.mark.parametrize(& ...
- FastAPI(七十一)实战开发《在线课程学习系统》接口开发-- 查看留言
之前FastAPI(七十)实战开发<在线课程学习系统>接口开发--留言功能开发分享了留言开发,这次我们分享查看留言 梳理这里的逻辑,这个接口要依赖登录. 1.判断用户是否登录 2.判断对应 ...
- ORM中聚合函数、分组查询、Django开启事务、ORM中常用字段及参数、数据库查询优化
聚合函数 名称 作用 Max() 最大值 Min() 最小值 Sum() 求和 Count() 计数 Avg() 平均值 关键字: aggregate 聚合查询通常都是配合分组一起使用的 关于数据库的 ...
- python的for循环基本用法
for循环 for循环能做到的事情 while循环都可以做到 但是for循环语法更加简洁 并且在循环取值问题上更加方便 name_list = ['jason', 'tony', 'kevin', ' ...
- HCIE笔记-第八节-传输层协议
传输层:实现"端到端"的服务 应用到应用 端口 = port [逻辑端口] 基于应用级别的互访,就是 端口到端口的互访. 传输层 = 0-65535[端口范围] === TCP/U ...
- HCIE笔记-第六节-CIDR与ICMP
项目部 58人 地址:194.2.3.128 /26 研发部 100人 地址: 194.2.3.0/25 市场部 27人 地址: 194.2.3.192/27 财务部 15人 地址:194.2.3.2 ...
- MySql免安装版 Error 2003 Can connect to MySQL server on ...
现象描述:mysql只能本地登录,无法远程登录 解决方案: 1. 查看mysql端口(默认端口3306,命令端口根据需要修改),发现只有本地连接端口开放. netstat -an|findstr 33 ...
- 解决PLSQL developer 乱码问题
今天打开 PLSQL developer 登录数据库后,查看数据的时候,发现表里面的中文数据全部变成了 ??? 这样的东西, 打开表看表的 中文描述信息 , 一样 显示问号. 什么鬼啊? 第一次 ...