【前端】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的配置让你感到 ...
随机推荐
- 小白的Python之路 day5 re正则模块
re正则模块 一.概述 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,要讲他的具体用法要讲一本书!它内嵌在Python中,并通过 re 模块实现.你可以为想要匹配的相应字符串 ...
- Nagios状态长时间处于Pending的解决方法
1 nagios 守护进程引起的一系列问题 1 影响nagios web页面收集监控信息 致使页面出现时而收集不到服务信息 2 影响pnp查看图形化,出图缓慢 3 影响查看服务状态信息,致使有时候查看 ...
- 【转】sed命令n,N,d,D,p,P,h,H,g,G,x解析
1. sed执行模板=sed '模式{命令1;命令2}' 即逐行读入模式空间,执行命令,最后输出打印出来 2. 为方便下面,先说下p和P,p打印当前模式空间内容,追加到默认输出之后,P打印当前模式空间 ...
- IIS与Apache禁止IP地址直接访问网站
一.IIS 防止恶意域名指向解决方法 首先单击"开始"-"设置"-"控制面板"-"管理工具",找到"Inter ...
- 基于SpringMVC+Mybatis搭建简单的前后台交互系统
前面博文有一篇 名为基于tomcat+springMVC搭建基本的前后台交互系统(http://www.cnblogs.com/hunterCecil/p/6924935.html),例文中使用了Io ...
- 01_Linux软件源配置
一.国内软件源 阿里源:https://mirrors.aliyun.com/ 清华大学:https://mirrors.tuna.tsinghua.edu.cn/ 中科大 : https://mir ...
- C# Ioc 接口注册实例以及注入MVC Controller
当弄一个小程序时,就忽略了使用Ioc这种手段,作为一个帅气程序员,代码规范,你懂的~,废话不多说,快速搭建一个Ioc接口实例以及直接注入到 MVC Controller 构造函数中如下: MVC in ...
- 《EntrePreneur》发刊词
I do not choose to be a common person. It is my right to be uncommon - if I can. I seek opportunity ...
- HDU 3374 String Problem
最大最小表示法与KMP求循环节 最大最小表示法 最大最小表示法与KMP求循环节的模板题, #include <iostream> #include <cstdio> #incl ...
- 济南清北学堂游记 Day 2.
在大佬云集的地方被直线碾压是什么样的体验? 大概就是210和1030的差别. 大概就是高质量机械键盘和空气的区别. 回来的路上,我一直在想,我到底是不是一个高三的? 大概也是能找到以前在家和学校训练时 ...