美文网首页web前端
如何在老项目中使用vue-cli?

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

作者: 姜治宇 | 来源:发表于2018-10-26 17:13 被阅读1次

    历史遗留问题

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

    相关文章

      网友评论

        本文标题:如何在老项目中使用vue-cli?

        本文链接:https://www.haomeiwen.com/subject/irqltqtx.html