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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
ES6 十大特性简介
2020/12/09 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python环境变量设置方法
2016/08/28 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
python实现学生通讯录管理系统
2021/02/25 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
公司租房协议书范本
2014/10/08 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers