前言:
最近在改造vue-cli 2.x + webpack2.x的项目时,由于之前路由是静态的,没有根据菜单权限动态生成前端路由。所以想对此进行改造,然后碰到了一些问题和坑,现在总结一下,避免以后继续踩坑。
先来说一下vue项目,组件懒加载的几种方式。
1. require(AMD规范)
{
path: '/demo',
name: 'Demo',
component: resolve => require(['../components/Demo/index'], resolve)
}
这种方法可以实现按需懒加载,并且一个组件会打包成一个js文件.
但是这里有一个坑,如果你的组件是在Demo目录下的index.vue组件,你的组件路径必须精确到/index, 如果只是到demo,是会找不到对应的组件的。
这种方式有个弊端, 就是不能指定某几个组件打包到同一个js里。
2. import (ES6提案推荐)
{
name: Demo,
path: /demo,
component: () => import(`@/views/${url}`)
}
这种方法可以实现按需懒加载,并且一个组件会打包成一个js文件。也可以加上/* webpackChunkName: "[name]" */, 将不同组件打包到同一个js文件中,如:
() => import(/* webpackChunkName: "[name]" */ `@/views${url}`)
[name]就是要指定的分类的名字
这里也有一个坑,如果你项目用的是webpack2.x的版本,那么import里面是不能带参数的,比如上面那个例子,组件是引入失败的。
官方解释: 大致意思说说传的变量有可能和系统某个其他文件或者路径重名,所以import的路径必须要尽量详细点。但是到底要多详细,你可以自己去试,所以我直接放弃了。
报错:Cannot find module "."
at webpackMissingModule......
webpack2.x的版本还有别的问题,用import且带参数的时候,编译会报警告:
Critical dependency: the request of a dependency is an expression
老版本的webpack只能是纯字符串的路径引入。但是也有小伙伴说路径多加几个层级就能带参数,但是我试过只加一层@/pages/, 是不行的。一般我们的组件路径也不会有很多层,所以我放弃了import,直接用了require的方式。
当然,如果你确实想用import,那就把webpack升级到4.x的版本,4.x的版本不存在这个问题。
但是webpack2.x升级到webpakc4.x,在vue中又需要更改一系列的配置,估计还得踩一部分坑。
3. require.ensure
webpack2.x的版本还能用require.ensure方式加载,如下:
{
name: 'Demo',
path:'/demo'
component: r => require.ensure([], () => r(require(`@/views${url}/index`)),
'index')
}
require.ensure()接受三个参数: 第一个参数的依赖关系是一个数组,代表了当前需要进来的模块的一些依赖; 。第二个参数回调就是一个回调函数其中需要注意的是,这个回调函数有一个参数要求,通过这个要求就可以在回调函数内动态引入其他模块值得注意的是,虽然这个要求是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则的的的的WebPack就无法静态分析的时候处理它; 第三个参数chunkName则是指定打包的组块名称。
但是chunkName不能是参数,只能是string.
4. 关于plugin-syntax-dynamic-import
如果用了import语法,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。不过,这个插件不需要单独安装,因为:
所以这也是为什么我们在babel的配置文件里需要配置@babel/preset-env的原因
或者:
5. 关于babel-plugin-dynamic-import-node
上面是官方解释: 也就是将import方法转成require(),且是动态的。
运用这个插件能在代码使用了import语法的情况下,大大提高代码的编译速度。
配置:
vue.cli2.x
.babelrc文件中,
"env": {
"test": {
"plugins": []
},
"development":{
"presets": ["env", "stage-2"],
"plugins": ["dynamic-import-node"]
}
}
babel.config文件中,
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
'env': {
'development': {
'plugins': ['dynamic-import-node']
}
}
}
6. 关于router.addRoutes
vue 提供了动态添加路由的方法。
关于vue router, 我们知道正常我们定义静态路由都是在new Router的时候就把所有的路由都定义好,这样在new Vue()的时候,把提前实例化的router对象传进去就可以了,这就是常规的定义静态路由的方法。
但是很多情况,我们的路由都是需要根据权限动态生成的,所以需要动态添加路由。
也正是因为需要动态生成路由,所以我们才会碰到前面一系列懒加载组件导致的问题。因为静态路由的时候,引入组件基本都是固定路径,不涉及到传参数的问题。
所以,我们用前面懒加载组件,构造一个组件对应的路由信息,最终把构造好的路由,动态添加到vue router中。
但是这里也需要注意几点:
1:addRouter方法添加的router就像是Vuex里的缓存一样,并不是添加过了就会一直都在,只要页面刷新了, 添加的router就没了,需要重新添加,这个很好理解,因为静态路由也是这样,每次刷新了页面,静态路由也需要重新构造。
所以,我们一般会在路由钩子里动态添加路由,保证刷新之后的路由会重新添加。
具体做法当然是在router.beforeEach中,执行router.addRouer()。
不过一般需要做个判断,不是每次访问新的路由都需要重新添加路由,否则会重复添加路由,也会出问题。
2:addRouter方法执行之后,router.options.routes是找不到你动态添加的路由的,如果需要更新,必须手动将动态添加的路由push进去。此时,router.options.routes才可以用来构建菜单导航。
最后,附上 一篇详细的踩坑笔记: