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 点击按钮显示和隐藏层的代码
Jul 25 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
浅谈js中的this问题
Aug 31 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
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
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
浅谈js原生拖放
2016/11/21 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
解析vue中的$mount
2017/12/21 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python连接DB2数据库
2016/08/27 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python实现石头剪刀布游戏
2021/01/20 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
高中数学教师求职信
2013/10/30 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
家庭经济困难证明
2015/06/23 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书