解决 Vue 开发环境下路由懒加载调试问题

[roojay]

简介

在使用 Vue 开发过程中，使用了官方的路由懒加载方案，将每个页面的 js 单独打包。
当使用 Fiddler 等代理工具进行线上拦截测试的时候非常麻烦，通过使用 babel-plugin-dynamic-import-node babel 插件，可以将 import() 转换为 require() 同步加载，将页面的 js 打包到 app.js 里面去，避免开发环境下路由懒加载。

使用

1. 安装 babel-plugin-dynamic-import-node 插件
   npm install babel-plugin-dynamic-import-node --save-dev
2. 开发环境配置启用插件，具体参考 babel-plugin-dynamic-import-node

// babel.config.js
module.exports = {
// 其它配置
  // 新增插件配置
  env: {
    development: {
      plugins: ['dynamic-import-node']
    }
  }
}

3. Vue 路由懒加载写法

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue') }
  ]
})