vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下:
文件结构如下图:
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
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)的更多相关文章
- [转]MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题)
MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题) 网上有一篇shangdong_chu网友写的文章介绍如何在Eclipse上配置M ...
- vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)
在vue-cli3的项目中,npm run serve时会把process.env.NODE_ENV设置为‘development’:npm run build 时会把process.env.NODE ...
- Hadoop分布环境搭建步骤,及自带MapReduce单词计数程序实现
Hadoop分布环境搭建步骤: 1.软硬件环境 CentOS 7.2 64 位 JDK- 1.8 Hadoo p- 2.7.4 2.安装SSH sudo yum install openssh-cli ...
- Vue项目分环境打包的实现步骤
转:https://blog.csdn.net/xinzi11243094/article/details/80521878 方法一:亲测真的有效 在项目开发中,我们的项目一般分为开发版.测试版.Pr ...
- Vue 项目分环境打包
我们开发项目的时候,用vue-cli 2.x版本新建的项目,只有dev, pro两种开发环境, 有时需要个test环境来给测试使用,所以找了很多方法,总结了个最简单的方法来给大家使用 packa ...
- vue项目打包步骤及运行打包项目
(1)项目打包 终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 那么应该如何修改呢? 具体步骤如下 ...
- Spring boot项目分环境Maven打包,动态配置文件,动态配置项目
Spring boot Maven 项目打包 使用Maven 实现多环境 test dev prod 打包 项目的结构 在下图中可用看出,我们打包时各个环境需要分开,采用 application-环境 ...
- 搭建vue开发环境的步骤,六步完成
搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:h ...
- Linux vagrant+virtualbox环境搭建步骤
Linux vagrant+virtualbox环境搭建步骤 Vagrant 是一款用来构建虚拟开发环境的工具,非常适合 php/python/ruby/java 这类语言开发 web 应用. 我们可 ...
随机推荐
- 常用的css解决方案
一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: n ...
- 完美解决 IE6 position:fixed 固定定位问题
关于 position:fixed; 属性 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. pos ...
- Error resolving template,template might not exist or might not be accessible by any of the configured Template Resolvers
template might not exist or might not be accessible by any of the configured Template Resolvers at o ...
- 从别人git下载项目下来然后运行
1点击clone or download 2.自由选择 3.拉到你想放的位置,我是放到桌面上的 4. cmd 打开,进入你 的下载到桌面的项目 5. # install dependencies n ...
- canvas基础用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 为什么串行传输时总是LSB在前?
https://superuser.com/questions/1104212/why-do-serial-ports-send-data-least-significant-bit-first 其实 ...
- Redis 常用的数据结构
String 字符串 set get 使用场景: 可以用来作为缓存使用(缓存更新策略和缓存雪崩如何处理) List lpop rpop lpush rpush 使用场景: set 无序集合 使用场景: ...
- MySQL基础知识 数据库 数据表
1.数据库结构 库 表 数据 2. sql(structured query language)结构化查询语言 管理数据库 管理表 管理数据 3.数据库 增删改查 增 create database ...
- 类文件路径一classpath
classpath作用 指定配置/资源文件的路径 web文件夹层次 src(编译前) main java resources webapp test java resources pom.xml we ...
- el-upload文件上传组件
一.介绍 element-ui的组件之一,用来点击上传文件 官方是使用 before-upload 限制用户上传的图片格式和大小.但是某些浏览器不支持此方法,所以使用on-change来代替. 二.代 ...