vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)


Posted in Javascript onJune 04, 2019

在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下:

文件结构如下图:

vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)

1)在config文件内新建test.env.js文件:

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG:'"test"'
}

2)修改config内的prod.env.js文件:

'use strict'
  module.exports = {
   NODE_ENV: '"production"',
   ENV_CONFIG:'"prod"'
  }

3)对build中webpack.prod.conf.js做如下修改:

// const env = require('../config/prod.env') //原始代码

或者为

// const env = process.env.NODE_ENV === 'testing' //原始代码
//  ? require('../config/test.env')
//  : require('../config/prod.env')
// console.log(process.env.NODE_ENV);

修改为:

const env = config.build[process.env.env_config+'Env']

4)config中的index.js 文件中build部分代码修改如下:

build: {
  prodEnv: require('./prod.env'),
  testEnv: require('./test.env'),
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
 // ····余下的代码就不写了
}

5)确认安装cross-env

npm install cross-env ?save-dev

6)对build文件夹下的build.js的修改:

'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')

// const spinner = ora('building for production...')  //注释掉
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )

spinner.start()

7)修改package.json文件(在script里面添加):

"scripts": {
 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 "start": "npm run dev",
 "unit": "jest --config test/unit/jest.conf.js --coverage",
 "e2e": "node test/e2e/runner.js",
 "test": "npm run unit && npm run e2e",
 "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
 "build": "node build/build.js",
 "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
 "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},

8)在common文件下新建env.js,对环境进行判断并切换,内容如下:

/*
 * 配置编译环境和线上环境之间的切换
 * baseUrl: 域名地址
 * routerMode: 路由模式
 */
let baseUrl = '';
let routerMode = 'history';
let DEBUG = false;
let cancleHTTP = [];//取消请求头设置;
//注:下面的baseUrl地址为假地址,只是模拟的,无法调通。
if (process.env.NODE_ENV == 'development') {
  baseUrl = "https://10.248.65.100/GetTravelMethod";
  DEBUG = true;
}else if(process.env.NODE_ENV == 'production'){
  baseUrl = "https://10.248.65.200/GetTravelMethod";
  DEBUG = false;
}else if(process.env.NODE_ENV == 'testing'){
  baseUrl = "https://10.248.65.150/GetTravelMethod";
  DEBUG = false;
}

export{
  baseUrl,
  routerMode,
  DEBUG,
  ROLE,
  cancleHTTP
}

想要test环境下则运行:

npm run build--test

相应的改为production环境则运行:

npm run build--prod

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
JavaScript实现页面中录音功能的方法
Jun 04 #Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 #Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 #Javascript
js回文数的4种判断方法示例
Jun 04 #Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 #Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 #Javascript
JavaScript之数组扁平化详解
Jun 03 #Javascript
You might like
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
初步剖析C语言编程中的结构体
2016/01/16 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Python中logging日志库实例详解
2020/02/19 Python
python统计文章中单词出现次数实例
2020/02/27 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
设计师求职信
2014/07/01 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis