vue项目打包之开发环境和部署环境的实现


Posted in Javascript onApril 23, 2020

项目开发阶段和生产环境可能不一样

如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成正式的接口

vue项目打包之开发环境和部署环境的实现

手动改动接口,既繁琐又容易出错(当然,区别还不止这些)

优雅的解决方案是,分别使用两个入口文件,一个用于开发环境打包,一个用于生产环境打包

具体来说,分为下面几个步骤

1、创建入口文件

在 src 目录下新建 prod_env.js 和 dev.env.js

将main.js 中代码分别拷贝到这两个文件中,并删除 main.js

2、配置打包时的入口文件

项目根目录下新建 vue.config.js

编写如下代码

module.exports={
  chainWebpack:config=>{
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/prod_env.js')
    })
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/dev_env.js')
    })
  }
}

说明

开发时,使用 npm run serve 命令,NODE_ENV 的值就是 developmnent ,所以会将 dev.env.js 作为入口文件

部署时,使用 npm run build 命令,NODE_ENV 的值就是 production,所以会将 prod_evn.js 作为入口文件

 3、测试

故意在两个入口文件中搞点错误,如注释1行下面需要用到的代码,然后运行打包命令,就可以看到错误信息

Javascript 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
javascript实现行拖动的方法
May 27 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 #Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 #Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 #Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 #Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 #Javascript
微信小程序实现手指拖动选项排序
Apr 22 #Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 #Javascript
You might like
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php输出xml属性的方法
2015/03/19 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
2016/07/18 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
jQuery实现获取多选框的值示例
2020/02/07 jQuery
vue界面发送表情的实现代码
2020/09/11 Javascript
在windows系统中实现python3安装lxml
2016/03/23 Python
Python程序退出方式小结
2017/12/09 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
中介业务员岗位职责
2014/04/09 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
体检通知范文
2015/04/21 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
Python实现滑雪小游戏
2021/09/25 Python
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis