vue给不同环境配置不同打包命令

第1步:安装cross-env

npm i --save-dev cross-env

第2步:修改各环境下的参数

在config/目录下添加test.env.js、pre.env.js。

修改prod.env.js里的内容,修改后的内容如下:

‘use strict‘
module.exports = {
 NODE_ENV: ‘"production"‘,
 EVN_CONFIG:‘"prod"‘,
 API_ROOT:‘"/apis/v1"‘
}

分别对test.env.js和pre.env.js文件内容进修修改,修改后的内容如下:

‘use strict‘
module.exports = {
 NODE_ENV: ‘"testing"‘,
 EVN_CONFIG:‘"test"‘,
 API_ROOT:‘"/test/apis/train"‘
}
‘use strict‘
module.exports = {
 NODE_ENV: ‘"presentation"‘,
 EVN_CONFIG:‘"pre"‘,
 API_ROOT:‘"/pre/apis/train"‘
}

对dev.env.js文件内容进行修改,修改后的内容如下。dev环境配制了服务代理,API_ROOT前的api是配制的代理地址。

module.exports = merge(prodEnv, {
 NODE_ENV: ‘"development"‘,
 VN_CONFIG: ‘"dev"‘,
 API_ROOT: ‘"api/apis/v1"‘
})

第3步:修改项目package.json文件

对package.json文件中的scripts内容进行个性,添加上新定义的几种环境的打包过程,里的参数与前面的调协保持一致。

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
  "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
 },

在这里,NODE_ENV最好都设成production,因为在utils.js只做了production一种判定,亲测不会影响各环境API参数。

第4步:修改config/index.js

修改config/index.js文件中build参数,这里的参数会在build/webpackage.prod.conf.js中使用到

build:{
  // Template for index.html
  // 添加test pre prod 三处环境的配制
  prodEnv: require(‘./prod.env‘),
  preEnv: require(‘./pre.env‘),
  testEnv: require(‘./test.env‘),
  //下面为原本的内容,不需要做任何个性
  index:path.resolve(__dirname,‘../dist/index.html‘),

第5步:在webpackage.prod.conf.js中使用构建环境参数  

对build/webpackage.prod.conf.js文件进行修改,调整env常量的生成方式。

// 个性env常量的定义
// const env = require(‘../config/prod.env‘)
const env = config.build[process.env.env_config+‘Env‘]

第6步:调整build/build.js  

删除process.env.NODE_ENV的赋值,修改spinner的定义,调整后的内容如下:

‘use strict‘
require(‘./check-versions‘)()
// 注释掉的代码
// process.env.NODE_ENV = ‘production‘
const ora = require(‘ora‘)
const rm = require(‘rimraf‘)
const path = require(‘path‘)
const chalk = require(‘chalk‘)
const webpack = require(‘webpack‘)
const config = require(‘../config‘)
const webpackConfig = require(‘./webpack.prod.conf‘)
// 修改spinner的定义
// const spinner = ora(‘building for production...‘)
var spinner = ora(‘building for ‘ + process.env.NODE_ENV + ‘ of ‘ + process.env.env_config+ ‘ mode...‘ )
spinner.start()
//更多的其它内容,不需要做任何调整的内容 ...

最后:

执行npm run build:test打包的就是测试环境

执行npm run build:prod打包的就是生产环境

原文地址:https://www.cnblogs.com/woshidouzia/p/9345706.html

时间: 2024-10-24 20:00:15

vue给不同环境配置不同打包命令的相关文章

cocos2dx环境配置和打包

安装软件准备: vs2012 cocos2d-x-2.2.1 adt-bundle-windows-x86_64-20121030 android-ndk-r9c-windows-x86_64 jdk-7u21-windows-x64 python-2.7.6.amd64 cygwin64 setup-x86_64 Step 1:安装visual studio 2012 用于开发cocos2dx程序,不用说了 下载方面各位自己去找罗 step 2:下载cocos2d-x源码 下载地址:http:

webpack渐入佳境系列一:webpack环境配置与打包基础【附带各种 "坑" 与解决方案!持续更新中...】

首先介绍传统模块化开发的主流方案: 1.基与CMD的sea.js,玉伯提出的解决方案,据说原来京东团队在使用.用时才定义,就近加载.最近在浏览seajs官方文档时发现seajs的域名已经在转卖,惊恐万分之余又想起了那句话,国内团队开发的技术,不是十全九美的最好不要用.国内高强度的生活节奏与压力使得日常维护变得很吃力.(想到这里,不禁为vue捏了一把汗,不过还好vue的前景非常光明!). 2.基于AMD的require.js,之前在用.提前声明与定义.国外团队维护. 3.基于commonJS的we

VUE项目多环境配置.md

目录 一.了解webpack.DefinePlugin 二.项目中如何配置多环境 web项目开发,通常需要有开发环境.测试环境和生产环境,用于配置不同的环境变更,如调用本地接口.测试接口和生产接口,VUE项目是前后端完全分离的框架,像是web界的C/S构架,在做VUE前端开发时,就需要用开发环境甚至于mock环境,等项目上线时,则需要使用生产的环境变量进行打包部署. 一.了解webpack.DefinePlugin webpack是静态模块打包器,可以将vue项目中所有文件打包成一个或多个jsb

cocos环境配置和打包apk

环境: Win10 + vs2015 + cocos2d-X-3.10 开发  软件的安装与环境配置: 资源准备:(后面备注的版本为笔者所选的) 1  python (python-2.7.3) 2  CocosForWin-v3.10(官网可下载) 3  vs2015 分别安装以上三个软件,路径没有限制,但是路径名称最好不要出现中文/空格等特殊字符,包括后面建立项目时项目的存放路径,最好用纯英文+"-",比如"cocos2d-x-3.10",因为笔者以前就因为路径

Vue基础(环境配置、内部指令、全局API、选项、内置组件)

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信

Mac 學習系列之SVN环境配置及常用命令大全

Windows里面用SVN是比較方便和Easy的,mac下面的其實也一樣. mac下带有SVN因此只需要激活它–环境配置: svnadmin create $Path 用来下载一个svn程序即可 下载后就可以下载代码了. 以下是svn 常用命令大全: ??1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout http://xxxxxxxxxxxx 简写:svn co 2.往版本库中添加新的文件 svn add fil

使用maven profile实现多环境配置相关打包

项目开发需要有多个环境,一般为开发,测试,预发,正式4个环境,通过maven可以实现按不同环境进行打包部署,命令为: mvn package -P dev 在eclipse中可以右击选项run configuration,输入上述命令. PS:eclipse maven install和maven packege的区别在于前者除了打包到target外,还会install到本地仓库,这样其他引用的工程就可直接使用. 其中"dev"为环境的变量id, 可以自己定义, 我定义的名称为:dev

Maven简介,环境配置及常用命令

最近公司开始让做自动化,要用cucumber,所以需要配置maven环境, 边做边总结一下步骤. 1. maven简介 Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统(Dependency Management System),和用来运行定义在生命周期阶段(phase)中插件(plugin)目标(goal)的逻辑.当你使用Maven的时候,你用一个明确定义

iDempiere 使用指南 windows下eclipse开发环境配置及打包下载

Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idempiere.org/zhiDempiere 中文社区www.idempiere.org.cniDempiere 中文社区QQ群 65713012 本文说明如何在windows下面配置iDempiere的eclipse 开发环境,同时提供配置好的环境下载.请同时参照第一篇 绿色版iDempiere环境