vue项目中运用webpack动态配置打包多种环境域名

　　在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。（欢迎纠错，谢谢。）

1. 安装插件 cross-env，npm install cross-env --save -dev，用于配置命令行输入命令。

2. 修改package.json里的script命令：

　　配置了test（测试），ready（预发布），prod（正式）三种环境，npm run build 默认设置成 npm run build:prod，也可以根据自己需求，配置更多的命令，参数自定。网上看到有人去修改NODE_ENV这个默认的参数，配置文件里有很多地方都引用了这个参数。本人认为这个默认参数可以不改，自己重新增加一个参数就行（这里增加一个BUILD_ENV参数）。

"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","build": "npm run build:prod","build:test": "cross-env NODE_ENV=production BUILD_ENV=test node build/build.js","build:ready": "cross-env NODE_ENV=production BUILD_ENV=ready node build/build.js","build:prod": "cross-env NODE_ENV=production BUILD_ENV=prod node build/build.js"},

3. 修改config目录下的prod.env.js

里面的默认配置是这样：只有一个NODE_ENV

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

修改后的配置：

'use strict'
const BUILD_ENV = process.env.BUILD_ENV
let baseUrl
switch (BUILD_ENV) {case 'test':baseUrl = 'api.test.com'break;  case 'ready':baseUrl = 'api.ready.com'break;case 'prod':baseUrl = 'api.prod.com'break;
}
module.exports = {NODE_ENV: '"production"', BUILD_ENV: '"' + BUILD_ENV + '"',baseUrl: '"' + baseUrl + '"',
}

　　修改的配置增加了BUILD_ENV和baseUrl两个属性，属性值记得拼接双引号，process.env.BUILD_ENV就是命令行里输入的BUILD_ENV的值，再根据BUILD_ENV进行相应的判断。在项目里，就可以通过process.env拿到prod.env.js暴露出去的3个属性。比如接口文件，就需要process.env.baseUrl来动态修改不同环境域名。

转载于:https://www.cnblogs.com/c-ms/p/11073675.html

vue项目中运用webpack动态配置打包多种环境域名相关推荐

Vue项目开发需要准备和配置些什么环境？
Vue项目开发需要准备和配置些什么环境? 一.首先需要安装node.js 下载:安装node.js链接安装在D盘 window+R,输入cmd,打开命令提示符窗口,输入: npm -v 检测是否安装 ...
Vue项目中如何设置动态的TDK
TDK是什么 TDK就是网站的标题(title).描述(description)和关键词(keyword) TDK在哪里上面大佬对TDK的概念解释的很全面,但是在网页中的TDK在哪里呢,作为开发人员 ...
vue项目中使用Echarts 动态更改图表数据， Vue 折线图、柱状图等图表动态刷新，
问题:在vue组件中,用echarts插件动态获取.修改图表数据解决:已解决! 第一步:打开cmd命令窗口安装echarts依赖安装:npm install echarts -S 第二步:在m ...
vue项目中使用 webpack优化之HappyPack 实战
由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做. 我们需要Webpack 能同一时间处理多个任务,发挥多核 C ...
VUE项目中CSS设置动态宽度的方法
网上找到三种方法: 一.使用cumputed 首先你务必看Vue的官方文档.涉及到的基础知识有: 绑定内联样式的使用 computed的使用文档写的都是基础使用.那么在项目实战中如何使用,两步就能实 ...
vue项目中eslint规则校验配置
新建.eslintrc.js文件,复制下面代码,将文件放到项目根目录即可 module.exports = {root: true,parser: 'vue-eslint-parser', env: ...
Vue项目中常见问题(23)动态展示Floor组件
目录 gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master 1.查看数据对应的位置 2.为什么这 ...
【vue】在vue项目中按顺序动态24个英文字母选项：A B C D E F......
效果展示: 点击增加选项和答案后,会按顺序新增24位的英文字母:  <el-button type="danger" size=&quo ...
vue 项目中的打包配置
当我在使用vue 项目的时候, 我们可能会打包一下线上环境发布, 一会又在本地启动, 因为线上的环境要放在站点根目录下的二级目录中, 而我们的测试环境只是在 ./ 的根目录下, 所以, 当我要打包的时 ...

vue项目中运用webpack动态配置打包多种环境域名

vue项目中运用webpack动态配置打包多种环境域名相关推荐

最新文章

热门文章