历史遗留问题
如果从头构建一个vue项目,我们会毫不犹豫的用vue-cli构建一个项目,然后按照人家自动生成的目录结构规规矩矩的写代码即可,然鹅现实并不总是完美的,有时我们接手的项目可能是迭代了n个版本甚至n年的老项目,jquery、angular甚至backbone的代码都有。
而且更为恶心的是,路由可能是某个很老的程序员,用很古老的jquery写的,用简单的$.load(url)实现的页面切换,但你又无法直接铲除它,因为这样意味着全部页面都需要重构,这个工作量无疑是非常巨大的,需极大的人力物力的损耗,而且重构意味着重新测试,对稳定性也有一定的影响。
怎么办呢?
一般的解决办法就是——最大限度保留已经线上稳定运行的代码,重构部分问题较多的代码,这样的工作量是完全可以接受的。
然鹅问题来了,如何在老项目中接入vue呢?
有一种笨办法,就是在每个页面都引入一次vue.js,这样起码可以使用vue一些优秀特性了,但这样做实在太low逼,我们无法享受热更新带来的coding享受,仍需要改一点东西就刷新一下才能看到实际效果。
有没有更好的接入办法呢?
如何上线?
答案当然是肯定的,我们先来捋一下vue-cli的开发流程。
vue-cli有两种模式,分别是dev和build。
第一步:开发
运行命令:
npm run dev
这样就进入了开发模式,本地会起一个node服务,利用node做代理,可以轻松访问后端api接口,避免了静态代码的跨域问题,配置如下:
proxyTable: {
'/': {
target: 'http://www.glt.com/',
changeOrigin: true, // 是否跨域
secure: false
}
},
第二步:打包
运行命令:
npm run build
开发完成后,我们可以将代码进行打包,最终生成一个纯静态的dist目录。
相关的打包配置如下:
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'backend-ncs/static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
第三步:上线
好啦,经过一番努力终于把项目完成了,那最终如何上线呢?
大家一定要记住,我们上线的一定是打包后的dist目录,纯静态网页。
我们看一下这个dist目录,都生成了些什么东西?
dist.png
只有一个index.html,加一个有css、js和img的目录。
只要把代码跟后端api接口部署在一台服务器,就不存在跨域问题,当然了,也可以借助nginx做代理转发。
哈希模式
在vue项目中,哈希模式是我们最常用的路由模式,通常是长成酱紫的:
http://localhost:9999/#/find/info/123
这是dev开发模式下的一个路由,#号后面的字符串就是哈希值,我们可以用来标识每个页面的路由。
而如果是build打包后的代码,其实我们访问的应该是dist目录下的index.html后面的哈希值来定位路由,通常就是酱紫了:
http://localhost:9999/backend-ncs/dist/index.html#/find/info/123
在老项目中接入vue-cli
了解了哈希模式的原理后,我们就可以在老项目中灵活使用vue-cli了。
demo.png
假如左侧菜单是用jquery写的老式导航,而且只能定位到.html后缀的文件,怎么办呢?
我们可以先创建一个.html文件,然后在这个文件中,利用iframe导入到vue-cli打包后的代码。
<iframe src="/backend-ncs/dist/index.html#/find/info/123" style="border: 0px;width:100%;margin-top:20px; min-height:800px;overflow-y:hidden;padding-bottom: 70px"></iframe>
<script>
$(function(){
$.cookie('btns',window.globalBtns)
})
</script>
可用通过cookie、url两种方式向子页面传参。
用cookie的话,一定要保证是同域下的;url传参就比较简单了,直接在#后面当成路由参数加就可以。
大家要注意的是,父页面的window.globalBtns这个全局变量,到了vue-cli打包后的页面中就访问不到了,这是vue做的变量保护措施所致,而通过cookie传递是没问题的。
网友评论