我们是怎么从ng迁移到vue的
我们是如何从ng1迁移ing到vue的 原本的技术栈 ng1 + gulp + slim + vue *2 + iframe 的一个后端管理项目 这是一个本身因为人手不足，一开始由后端同学创建的后端管理项目，基本采用了gulp + ng1来进行开发，同时前端接手之后为了方便开发以及跟上潮流，采用了新开子目录使用vue开发，nginx和iframe进行整合的方式，最后一个项目变成了三个项目，其实最开始进行开发的时候，连怎么启动都不知道😂 要解决的问题 项目的层级结构 原本的结构 顶级目录只包含多个子文件夹以及build.sh，每个子项目需要独立进行编译以及开发 新的结构 采用signle-spa作为入口文件解决方案，统一管理所有项目的入口文件，实现一次启动，所有项目都能一起开发以及编译，省去了来回切换以及端口冲突 构建语言的混乱 原本的架构 原本的app是使用ng1来进行编写js部分，slim来编写页面模版，同时使用gulp来完成遍历所有的js文件，并打包到一个js中，后来一些新的页面部分采用iframe引入另一个vue-cli项目，两者之间通过cookie来进行登录数据的共享。 更新之后的架构 因为模版文件的问题，仍然以gulp为主，webpack负责vue和原本app的js打包和资源文件的编译工作，大家约定好，原本的ng部分尽量不更新，新的采用vue进行编写 逐步过渡 原本的方案 老的不管它，需要更新就回去更新，新的需求去vue的项目中编写 现在的方案 single-spa进行页面的拆分，将需要更新的老的ng部分作为一个新的子app，拆分出来之后再进行更新，保证局部更新，不影响整体 解决过程 编译工具 确定了整体的迁移方案之后，就是首先对编译工具的改造了，最开始是想把gulp先替换成webpack的（因为习惯配置webpack了，以及webpack4 + babel7真的编译速度快了很多） 但是因为slim始终找不到适合使用的webpack插件的关系，最终决定还是保留gulp进行编译ng的相关的html文件 小问题 gulp支持webpack的问题 gulp-webpack插件支持的webpack版本是2，但是目标是使用4(为了快),好在webpack支持使用node来进行调用，只要在编译结束之后给gulp一个回调就可以了 const webpack = require('webpack') const fs = require('fs') module.exports = function (webpackConfig) { return new Promise((resolve, reject) => { const compiler = webpack(webpackConfig); compiler.run((err, stats) => { if (err) { console.error(err) reject(err) } // 输出 process.stdout.write(stats.toString({ // stats对象中保存着编译过程中的各种消息 colors: true, // 增加控制台颜色开关 modules: false, // 不增加内置模块信息 children: false, // 不增加子级信息 chunks: false, // 允许较少的输出 chunkModules: false // 不将内置模块的信息加到包信息 }) + '\n\n') }) compiler.hooks.afterEmit.tap('gulp', function() { resolve() }) }) } 同理，devServer也使用自定义的脚本, 当然因为公司原因，其中的api切换也直接放在devServer的before中 ...