历史遗留问题
如果从头构建一个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目录，都生成了些什么东西？
只有一个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了。
假如左侧菜单是用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传递是没问题的。
