vue项目打包之开发环境和部署环境的实现
项目开发阶段和生产环境可能不一样
如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成正式的接口
手动改动接口,既繁琐又容易出错(当然,区别还不止这些)
优雅的解决方案是,分别使用两个入口文件,一个用于开发环境打包,一个用于生产环境打包
具体来说,分为下面几个步骤
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行下面需要用到的代码,然后运行打包命令,就可以看到错误信息
相关推荐
-
Vue开发环境中修改端口号的实现方法
Vue开发环境中修改端口号 如上图所示,在开发环境中,8080便是端口号,这也是使用Vue脚手架创建的项目运行时的默认的端口. 1.Vue 2.x config文件夹中有一个index.js其中部分内容如下,port即为端口号,在这里更改即可. module.exports = { dev: { env: require('./dev.env'), port: 8080, // 端口号 assetsSubDirectory: 'static', assetsPublicPath: '/', pr
-
Vue.js开发环境快速搭建教程
Vue.js 现在在后端.前端.微信.移动端Web非常流行,今天简单模拟Vue.js快速安装: 1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install 估计会非常慢,我们可以使用淘宝NPM镜像下载安装:https://npm.taobao.org/ ##安装npm## sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装
-
详解vue-cli开发环境跨域问题解决方案
前后端分离开发中必要会遇到的问题-跨域.在使用vue开发的时候,开始为了解决跨域问题.采用的是CORS(Cross-origin resource sharing).后台在响应头中添加Access-Control-Allow-Origin.这样就可以跨域调后台接口了. 在前几天无意中看到了config的index.js文件中有一个proxyTable属性,通过配置可以解决开发环境的跨域 开发期间的API代理 当将此样板与现有后端集成时,通常需要在使用dev服务器时访问后端API.为了实现这一点,
-
详解vue+vuex+koa2开发环境搭建及示例开发
写在前面 这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用. 搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据.即,模拟后端接口. 当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点. 包括: koa2的知识点 node的知识点 跨域问题 fetch的使用 axios的使用 promise的涉及 vuex -> st
-
vue-cli3 配置开发与测试环境详解
需求 首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测试环境部署在名为 test 的子目录下,根据生产环境和测试环境的不同,某些界面和交互有细微的差别. 根据以上项目的基本情况,分析出需求如下: 实现区分线上生产环境和线上测试环境的环境变量,供项目代码中全局使用. 实现输入一行命令,执行两条指令,分别打包线上生产环境和线上测试环境的代码. 实现打包之后,自动将打包好的文件夹分别按照项目名+
-
Vue.js 2.0和Cordova开发webApp环境搭建方法
HTML5开发APP技术文档 一.环境参数 1.技术语言:HTML.CSS.ES6.Node.js等: 2.框架:Vue.js 2.x.Cordova: 3.开发系统:mac.windows等: 4.环境配置: node 6+ npm 3+ (最好下载Node.js官方最新版本) .jdk1.8.SDK(请直接下载Androidstudio软件官方最新版本,已集成AndroidSDk,建议以默认路径安装) . 二.系统环境变量配置(以window7为例) 1.AndroidSDK配置 A)添加用
-
Vue.js开发环境搭建
一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul
-
基于Vue2的移动端开发环境搭建详解
前言 vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧. 一.vue-cli 首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程 全局安装 vue-cli npm install vue-cli -g 借此也全局安装一个 webpack npm install webpa
-
windows下vue.js开发环境搭建教程
最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 既然是入门实例,那肯定从最基础的开始了,希望初
-
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
前言:上一篇记录文vue-cli 3.0 build包太大导致首屏过长的解决方案中提到了CDN优化,之前是直接在html中手动注入JS,也没有对开发和生产模式进行区分,因为是使用收费的CDN,所以在开发模式会遇到无权使用CDN的问题.要是使用CDN写死在html中,不同环境需要手动的切换CDN,那么早晚有一天会搞乱,下面就说说怎么在vue-cli 3.0 中根据不同环境动态注入CDN. 1. 修改public/index.html 通过htmlwebpackplugin动态注入脚本和样式,ind
-
vue.js开发环境安装教程
一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angula
-
详解如何从零开始搭建Express+Vue开发环境
准备工作 1. 为前端选择合适的预处理工具和资源管理工具 预处理工具又分为 js 预处理工具和 css 预处理工具.Javascript 一直以来最为人诟病的一点就是缺乏原生的模块机制,所有 js 代码文件在被 html 页面引入后将共用同一个命名空间.所以才出现了各种"标准"尝试解决这个问题,但他们都不是原生的,需要额外的工具对代码进行特殊处理.虽然 ES6 终于引入了模块机制,但以现在的浏览器支持程度,还不足以"毫无顾虑地随拿随用".所以 js 预处理工具最主要
-
webpack vue项目开发环境局域网访问方法
思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可
随机推荐
- 深入理解PostgreSQL的MVCC并发处理方式
- 利用VBS脚本轻松盗U盘数据
- Oscdimg 命令行选项使用
- 用缓冲技术提高JSP应用的性能和稳定性
- C++之CWnd窗口框架实例
- Android 清除SharedPreferences 产生的数据(实例代码)
- Docker基础命令详解
- MySql中取前几行数据使用limit来完成
- jQuery实现对象转为url参数的方法
- 静态网页加密
- linux命令详解之rpm命令参数使用方法
- Shell脚本case语句简明教程
- sqlserver中的事务和锁详细解析
- JavaScript实现汉字转换为拼音的库文件示例
- js判断子窗体是否关闭的方法
- 十三、WIN2000下的xcopy可以复制文件的安全设置
- shiro并发人数登录控制的实现代码
- C#窗体布局方式详解
- Cisco实战配置三层交换的综合案例
- 在vue中封装可复用的组件方法