vue-router根据环境改变动态加载组件

背景

在webpack的新特性中支持组件的懒加载,也就是说我们可以在加载到该路由的时候再把这部分脚本进行加载,同时这个在项目进行打包的时候,对应的文件也会被单独打包,对于首屏优化以及其他页面的资源加载优化都是非常好的。这也要求我们在每个页面组件使用组件的时候尽量按需引入,提升体验。

问题场景&&需求

那么我们需要解决的问题是: 0 webpack是静态解析路径的,直接传入变量并不可行 1 每次都写一串加载组件的代码很不方便,是否可以支持写成一个加载组件的方法 2 是否支持区分生产和开发环境,因为开发环境使用懒加载会导致热更新,导致更新变慢,所以开发环境使用全量默认加载,生产环境使用懒加载

解决方案

1 webpack的路径使用变量拼接,必须预先给出一个相对路径,然后把具体的组件路径在传入 2 用一个箭头函数,将需要传入的组件名或者相对路径传入 3 用process.env.NODE_ENV确定使用哪种加载方式

代码如下: 在原来的router/index.js中,定义一个加载组件的_import方法。

// router/index.js 
const _import = require('./_import_' + process.env.NODE_ENV)

//使用时
 {
      path: '/',
      name: 'HelloWorld',
      component: _import('HelloWorld')
    },

// router/_import_development.js
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

// router/_import_production.js 如果你加载的vue不是这个路径 请自定义哦
module.exports = file => () => import('@/views/' + file + '.vue')

最后

感谢PanJiaChen的vue-element-admin项目提供的实现思路

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Brian

Install Python3.6.x on CentOS7

---- 概述 在之前的文章中,我已经介绍了在CentOS6中安装Python2.7.x和Python3.4.x。请参考源码编译安装或者升级Python在Cen...

1K60
来自专栏Aloys的开发之路

Linux环境下JDK/Eclipse一键安装脚本

-------------------------------------------------------------------- author:jia...

25560
来自专栏IMWeb前端团队

Node基础:域名解析DNS(ok)

写在前面 Nodejs学习手册,基础总结之DNS模块。对从事web开发的同学来说,DNS解析再熟悉不过,在nodejs中也有一个模块可以完成dns解析的工作,使...

29160
来自专栏生信宝典

Linux学习-环境变量和可执行属性

文件的可执行属性和环境变量 Linux下文件有一个特殊的属性即可执行属性,用来指示这个文件是一个可执行的脚本或可以运行的二进制文件。前面所提到的这些命令,都具有...

24090
来自专栏电光石火

微信登陆代码

网页访问 https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_u...

45070
来自专栏散尽浮华

zabbix监控主机cpu达到80%后报警

在zabbix监控中,默认cpu监控模板中的触发器,当负载在一定时间内(比如最近5分钟)超过5以上为报警阀值。但是在实际场景中,由于服务器配置不一样,这个默认的...

38360
来自专栏pangguoming

使用sshfs挂载远程服务器目录

服务器日志查看,是开发人员和服务器运维人员在工作中经常会遇到的一件事情,只有一台服务器时,比较好办,直接登录服务器使用tail -f file-path 命令就...

21740
来自专栏指路者

Python开发环境搭建之Windows评论(0)

备注:用同样方法安装python2.7,安装目录改为Python27。安装后,python2.7与python3.6共存

9220
来自专栏along的开发之旅

linux关于bashrc与profile的区别

其实打开~/.profile, ~/.bashrc和~/.bash_profile文件,我们就可以看到区别. 1.首先说~/.profile: 这里有一...

14410
来自专栏章鱼的慢慢技术路

Linux命令_搜索文件

20050

扫码关注云+社区

领取腾讯云代金券