【前端】Vue2全家桶案例《看漫画》之七、webpack插件开发——自动替换服务器API-URL
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_7.html
项目github地址:https://github.com/shamoyuu/vue-vux-iconan
想来这个项目也做了一月了,期间部署了好几次,也经常在本地联调后台接口,所以服务器地址经常换来换去。
有一次部署的时候还把localhost给部署上去了,不得不部署第二次。
我们这一章就来解决这个问题,根据命令行参数,打包自动替换不同的服务器地址,不用再修改api.js了。
首先我们修改tools/api.js,为我们的服务器地址设置一个占位符
let apiUrl = "<<<service>>>";
let picServer = "<<<pic-service>>>"; console.info("apiUrl", apiUrl);
console.info("picServer", picServer);
因为对js的压缩不会压缩字符串,所以我们就可以通过替换占位符来做到我们上面提到的功能。
然后我们新建一个server.json文件,来保存我们各个平台,各个环境下的服务器地址
{
"webapp": {
"environments": {
"dev": {
"service": "http://localhost:18080/iconan",
"pic-service": "http://iconan.bj.bcebos.com"
},
"test": {
"service": "http://meleong.duapp.com/iconan",
"pic-service": "http://iconan.bj.bcebos.com"
},
"production": {
"service": "/iconan",
"pic-service": "http://iconan.bj.bcebos.com"
}
}
},
"mobile": {
"environments": {
"dev": {
"service": "http://localhost:18080/iconan",
"pic-service": "http://iconan.bj.bcebos.com"
},
"test": {
"service": "http://meleong.duapp.com/iconan",
"pic-service": "http://iconan.bj.bcebos.com"
},
"production": {
"service": "http://meleong.duapp.com/iconan",
"pic-service": "http://iconan.bj.bcebos.com"
}
}
}
}
这样就可以一目了然,想修改也特别方便。
然后我们修改gulpfile.js,先来通过指令的参数获取到我们想要的服务器地址
const serverConfig = require(process.cwd() + "/server.json");
global.SERVERS = serverConfig[args.t]["environments"][args.e];
然后我们来替换,如果是用gulp的管道的话,可以这么写,修改webpack.build文件
"webpack.build": (done) => {
let spinner = ora("正在打包,请稍后...");
spinner.start();
webpack(webpackConfig, (err, stats) => {
spinner.stop();
if (err) throw err;
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + "\n\n"); if (stats.hasErrors()) {
console.log(chalk.red(" 构建出错。\n"));
process.exit();
} // let stream = gulp.src(["dist/**/*"]);
// let servers = serverConfig[args.t]["environments"][args.e];
// for (let key in servers) {
// stream = stream.pipe(replace("<<<" + key + ">>>", servers[key]))
// }
// stream.pipe(gulp.dest("dist"))
// .on('end', function () {
// console.log(chalk.cyan(" 构建完成。\n"));
// done();
// }); done();
});
},
就是图里注释掉的那段。但是这样在开发环境下不可用,因为我们是用webpack配置的开发环境,如果你用的是gulp,可以这么做。
所以我们给webpack写一个插件来实现这个功能。
首先我们修改dev任务
const webpackDevConfig = require(process.cwd() + "/build/webpack.dev.conf"); "dev": () => {
let devCompiler = webpack(webpackDevConfig); new WebpackDevServer(devCompiler)
.listen(webpackDevConfig.devServer.port, webpackDevConfig.devServer.host, function (err) {
if (err) throw new gutil.PluginError("webpack-dev-server", err);
console.log(chalk.cyan(" 服务已启动\n"));
});
}
然后修改webpack.dev.conf最后的exports = devWebpackConfig,不要返回那个Promise。
然后我们写一个插件,新建build/plugin/servers-replace-webpack-plugin.js文件
function ServersReplaceWebpackPlugin(options) {
this.options = options;
} ServersReplaceWebpackPlugin.prototype.apply = function (compiler) {
let that = this; compiler.plugin('emit', function (compilation, callback) {
// 检查所有编译好的资源文件,替换所有需要替换的地方
for (var filename in compilation.assets) {
if (filename.endsWith(".js")) {
console.info("filename =", filename);
let newFile = compilation.assets[filename].source().toString(); let servers = that.options;
for (let key in servers) {
newFile = newFile.replace("<<<" + key + ">>>", servers[key]);
} compilation.assets[filename] = {
source: function () {
return newFile;
},
size: function () {
return newFile.length;
}
};
}
} callback();
});
}; module.exports = ServersReplaceWebpackPlugin;
然后分别为webpack.dev.conf和webpack.prod.conf添加这个插件。
它的参数就是在gulpfile.js里声明的 global.SERVERS
此系列到此结束。
完结,散花~
【前端】Vue2全家桶案例《看漫画》之七、webpack插件开发——自动替换服务器API-URL的更多相关文章
- 【前端】Vue2全家桶案例《看漫画》之一、添加四个导航页
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_1.html 项目github地址:https://github.com/shamoyuu/ ...
- 【前端】Vue2全家桶案例《看漫画》之番外篇、express上传漫画(可选)
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_extra_1.html 项目github地址:https://github.com/sha ...
- 【前端】Vue2全家桶案例《看漫画》之六、图片阅读页
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_6.html 项目github地址:https://github.com/shamoyuu/ ...
- 【前端】Vue2全家桶案例《看漫画》之四、漫画页
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_4.html 项目github地址:https://github.com/shamoyuu/ ...
- 【前端】Vue2全家桶案例《看漫画》之二、完成首页基本样式
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_2.html 项目github地址:https://github.com/shamoyuu/ ...
- 【前端】Vue2全家桶案例《看漫画》之五、引入axios
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_5.html 项目github地址:https://github.com/shamoyuu/ ...
- 【前端】Vue2全家桶案例《看漫画》之三、引入vuex
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_3.html 项目github地址:https://github.com/shamoyuu/ ...
- Vue2全家桶+Element搭建的PC端在线音乐网站
目录 1,前言 2,已有功能 3,使用 4,目录结构 5,页面效果 登录页 首页 排行榜 歌单列表 歌单详情 歌手列表 歌手详情 MV列表 MV详情 搜索页 播放器 1,前言 项目基于Vue2全家桶及 ...
- Vue2全家桶之一:vue-cli(vue脚手架)超详细教程
本文转载于:https://www.jianshu.com/p/32beaca25c0d 都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到 ...
随机推荐
- matlab文件读写处理实例(二)——textread批量读取文件
问题:对文件夹下所有文件进行批量读取,跳过文件头部分,读取每个文件数据部分的7,8,9列,保存到变量并且输出到文件. 数据: 文件夹11m\
- unity getcomponentsinchildren 翻船
今天使用GetComponentsInChildren, 老司机翻船.因为一直以来我使用这个函数,下意识的从来所有的相同component都是放在子节点下,本身节点肯定不会放一个相同的componen ...
- js基本语法与变量
1.//声明变量,js是弱类型语言,变量类型声明示没有意义的.变量类型是随时可以变化的.var a = 1; a = "haha"; a = false;2.注释与 ...
- python多线程限制并发数示例
#coding: utf-8 #!/usr/bin/env python import Queue import threading import time prolock = threading.L ...
- ABP官方文档翻译 8.2 SignalR集成
SignalR集成 介绍 安装 服务器端 客户端 建立连接 內建特征 通知 在线客户端 PascalCase与CamelCase对比 你的SignalR代码 介绍 ABP中的Abp.Web.Signa ...
- ABP WebApi 加载错误
[TypeLoadException:类型'Abp.WebApi.Validation.AbpApiValidationFilter'中的方法'ExecuteActionFilterAsync'从程序 ...
- BZOJ 1982: [Spoj 2021]Moving Pebbles [博弈论 对称]
给你N堆Stone,两个人玩游戏. 每次任选一堆,首先拿掉至少一个石头,然后移动任意个石子到任意堆中. 谁不能移动了,谁就输了... 以前在poj做过已经忘记了... 构造对称,选最多的一堆往其他堆分 ...
- .NET方面的框架的整理和总结
自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累了一些开源的组件,就目前想到的先整理于此,如果再想到,就 ...
- Gentoo(贱兔)Linux安装笔记
网上对于Gentoo Linux 的教程少之又少,所以这里我将自己的安装记录贴出来 希望对正在研究Gentoo 的小伙伴们有帮助! 1.确认连接到互联网,使用net-setup工具配置网络 roo ...
- 阿里云学习之API网关
注:此处仅供api的创建做一个补充参考,API网关的优缺点及创建过程中的参数详情,请参考阿里云开放文档:https://helpcdn.aliyun.com/document_detail/29478 ...