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 相关文章推荐
javascript 遍历验证所有文本框的值
Aug 27 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
原生javascript实现分页效果
Apr 21 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
javascript实现倒计时提示框
Mar 02 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
DIY实用性框形天线
2021/03/02 无线电
PHP新手上路(四)
2006/10/09 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
高分子材料个人求职信范文
2013/09/25 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
总经理助理的职责
2014/03/14 职场文书
委托书格式
2014/08/01 职场文书
公司离职证明样本
2014/09/13 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
公司晚会主持词
2019/04/17 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python