vue
vue-router 按需加载
vue的单页面（SPA）项目,必然涉及路由按需的问题。
以前我们是这么做的
1
2
//require.ensure是webpack里面的，这样做会将单独拉出来作为一个chunk文件
const Login = r => require.ensure( [], () => r (require('../component/Login.vue')));
但现在vue-router的官网看看，推荐这种方式：
1
2
//vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载
const App = () => import('../component/Login.vue');
可是，很多情况下，我们这么写npm run dev控制台直接报错，这是为什么呢？
1
Module build failed: SyntaxError: Unexpected token
原来是import这儿报错了，这就需要babel的插件了，vue-router官网上有一段提示：
如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
至此，问题全部解决了。
如果使用vue-cli生成项目，很可能在babel-loader没有配置上面的插件，这时需要我们自己去安装此插件：
1
cnpm install babel-plugin-syntax-dynamic-import --save-dev
然后修改webpack的js的loader部分：
1
2
3
4
5
6
7
{
test: /.js$/,
loader:'babel-loader',
options:{
plugins:['syntax-dynamic-import']
},
},
增加了option选项，至此，能识别我们：
1
const App = () => import('../component/Login.vue');
的语法了，页面出来了：
在打包的时候，发现我们如果只是这么写，出现的chunk包名字都是乱的，如果我们指定命名，该怎么办呢？webpack3提供了Magic Comments（魔法注释）
1
const App = () => import(/* webpackChunkName:'login'*/ '../component/Login.vue');
这样我们就为打包出来的chunk指定一个名字，最终生成login.js的chunk包。
相关知识
vue生命周期各阶段都做了什么
vue根目录下的index.html中的id=“app”与src目录下的App.vue中的id=“app”为什么不会冲突
ssm017网上花店设计+vue(论文+源码)
（vue）关于前端项目太大，内存溢出问题,保存就会报错。
网上花店设计+vue毕业设计(源码+lw+部署文档+讲解等)
nodejs网上鲜花预订系统 vue鲜花商城销售系统7jd2m
基于SpringBoot的网上花卉鲜花销售购物系统+Vue[毕业设计]
基于springboot的“花开富贵”花园管理系统java项目
rickyslim/insects
8款新娘时尚手捧花赏析(组图)(2)
网址: vue https://m.huajiangbk.com/newsview547144.html
| 上一篇: python 画心形线 matp |
下一篇: 会员介绍 |
