vue如何实现路由根据开发状态懒加载
小编给大家分享一下vue如何实现路由根据开发状态懒加载，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
路由根据开发状态懒加载
1 一般情况
一般我们在路由中加载组件的时候：
import Login from '@/views/login.vue'
export default new Router({
routes: [{ path: '/login', name: '登陆', component: Login}]
})当你需要懒加载 lazy-loading 的时候，需要一个个把routes的component改为 () => import('@/views/login.vue') ，甚为麻烦。
当你的项目页面越来越多之后，在开发环境之中使用 lazy-loading 会变得不太合适，每次更改代码触发热更新都会变得非常的慢。所以建议只在生成环境之中使用路由懒加载功能。
2 优化
根据Vue的异步组件和Webpack的代码分割功能可以轻松实现组件的懒加载，如：
const Foo = () => import('./Foo.vue')
在区分开发环境与生产环境时，可以在路由文件夹下分别新建两个文件： _import_production.js
module.exports = file => () => import('@/views/' + file + '.vue')
_import_development.js ，这种写法 vue-loader 版本至少v13.0.0以上
module.exports = file => require('@/views/' + file + '.vue').default
而在设置路由的 router/index.js 文件中：
const _import = require('./_import_' + process.env.NODE_ENV)
export default new Router({
routes: [{ path: '/login', name: '登陆', component: _import('login/index') }]
})这样组件在开发环境下就是非懒加载，生产环境下就是懒加载的了
以上是“vue如何实现路由根据开发状态懒加载”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
