如何在老项目中使用vue-cli？

历史遗留问题

如果从头构建一个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传递是没问题的。