小编给大家分享一下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如何实现路由根据开发状态懒加载”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
