Vue-router按需加载组件解决方法

最新推荐文章于 2023-02-07 11:53:24 发布
最新推荐文章于 2023-02-07 11:53:24 发布
阅读量358 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49411859/article/details/117887426
版权

现在可以看到官网说明按需加载组件的方式如下：

// vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载
const App = () => import('../component/Login.vue');

我们在使用时通常会报这样的错：

Module build failed: SyntaxError: Unexpected token

可以发现是import报错，是因为babel解析不了的原因需要下载插件

cnpm install babel-plugin
最低0.47元/天 解锁文章
LvnCYoU
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-Router实现页面正在加载特效方法示例
12-09
前言 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用。因为每个页面都是一个 Vue 组件，你需要从服务器端请求数据，然后再让 Vue 引擎来渲染到页面上。 例如，这里有个用户个人资料的页面。 user.vue 文件如下： <template> <div>
vue中vue-router路由懒加载（按需加载）的作用以及常见的实现方法
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
12-06 3639
路由懒加载，也叫延迟加载或按需加载，是在需要的时候进行加载的一种技术。在单页面应用（SPA）中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也不利于用户体验。而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
vue-router 按需加载 component: () = import() 报错的解决
01-18
vue的单页面（SPA）项目,必然涉及路由按需的问题。 以前我们是这么做的 //require.ensure是webpack里面的，这样做会将单独拉出来作为一个chunk文件 const Login = r => require.ensure( [], () => r (require(‘../component/Login.vue’))); 但现在vue-router的官网看看，推荐这种方式： //vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载 const App = () => import(‘../component/Login.vue’); 可是，很多情
vue-router按需引入报错方法解决
pz3305636904的博客
11-30 4826
在vue-router按需引入的时候报错： error in ./src/router/index.js Syntax Error: Unexpected token (37:21) 35 | name:'Login', 36 | path: '/login', > 37 | component: () => import ('../view...
vue引入ant-design-vue按需加载编译报错解决方案
Luo的博客
02-20 3478
vue引入ant-design-vue按需加载编译报错信息 error in ./node_modules/ant-design-vue/es/style/index.less Module build failed (from ./node_modules/less-loader/dist/cjs.js): // https://github.com/ant-design/ant-motion/issues/44 .bezierEasingMixin(); ^ Inline JavaScript is
【Vue】报错解决（Module parse failed: Unexpected token (1:0) You may need an appropriate loader）
你难忘的
09-27 1914
文件一定要加上.vue后缀
vue报错Module parse failed: Unexpected token (1:0)
lyl815616的博客
09-09 2万+
WARNING Compiled with 1 warnings ...
详解vue-router的Import异步加载模块问题的解决方案
10-15
- 使用 Vue Router 的 `children` 和 `懒加载`：Vue Router 提供了内置的懒加载功能，可以在定义路由时直接使用 `component: () => import('./Component.vue')` 这样的语法。 总结，处理 Vue Router 中 Import 异步...
解决vue-router 嵌套路由没反应的问题
10-14
const router = new VueRouter({ mode: 'history', routes: [ { path: '/recom', component: Recom, // 假设Recom是父组件 children: [ { path: 'view', name: 'recomView', component: recomView }, { path...
vue-router 按需加载 component: () => import() 报错的解决
10-14
主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
项目无法识别 ?. 语法，导致报错Module parse failed: Unexpected token
热门推荐
weixin_45717984的博客
05-27 5万+
首先找到报这个问题的地方 我这里是因为es语法问题 如果你也是npm安装了一个包，然后在导入的时候报这个语法错，那你可以接着往下看，如果不是就不用往下看了 问题原因： 因为导入的组件库是直接上源码的，必须告知webpack，需要编译一下这个库，让源码中的es6、es7的特性转换为es5 解决方案： 1.在vue.config.js 里面加上 transpileDependencies: [‘/@yabby-business/’] 2.还有一种方式在babel.config.js中指定库导入的时候用的编
编译报错：Module parse failed: Unexpected token (18:41)
weixin_56035334的博客
02-07 5699
error in ./node_modules/yargs/lib/platform-shims/esm.mjs Module parse failed: Unexpected token (18:41) You may need an appropriate loader to handle this file type, currently no loaders are 借助网上搜索，发现是webpack缺失一个loader加载器，网上其他博客的解决方法都是在webpack.js里面进行修改代码。
webpack+vue3+TS拼接动态require路由报错Module parse failed: Unexpected token (1:10)
HCL_world的博客
04-30 1547
webpack+vue3+TS拼接动态require路由报错Module parse failed: Unexpected token (1:10) 大家肯定遇到过 文件引用 或 图片导入时由静态地址变为动态地址 即 require( ‘…/assets/img/login.png’) ==> require( 变量 + ‘文件名’) 明明在动态拼接的时候打印出来的路径是没有问题的 但是如此const route = require('../router/main' + key.split('.')[
【Vue，webpack】报错解决（Module parse failed: Unexpected token (1:0) You may need an appropriate loader）
wzg0817的博客
07-28 2万+
错误如下： webpack默认是不能处理vue文件，所以只能我们自己添加一些额外的插件进行处理它。 解决方式： 第一步：安装插件 cnpm i vue-loader vue-template-compiler --save-dev 第二步：在webpack.config.js添加如下配置： module: { rules: [ { test: /\.vue$/, use: { loader:
vite+vue3动态添加路由出错
weixin_45700768的博客
10-07 1922
vite+vue3动态添加路由出错
vue 使用路由component: () =＞import (‘ ‘)报错解决办法
sinat_41694829的博客
08-11 2881
vue运行时报错
Vue 中使用 import 进行路由懒加载的原理
qq_36437172的博客
05-23 3450
首先我们来说说，import 和 require 的区别。 node 编程中最重要的思想就是模块化，import 和 require 都是被模块化所使用。 （1）遵循规范 require是 AMD规范引入方式 import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法 （2）调用时间 require 是运行时调用，所以require理论上可以运用在代码的任何地方 import 是编译时调用，所以必须放在文件开头 （3）本质 require 是赋值过程，其实require的.
vue-router 按需加载 component: () => import() 报错
05-10
因此，我们希望只有在用户真正需要使用某个组件时才加载它，这就是按需加载组件的主要目的。 Vue Router 提供了 `component` 配置项用于指定当前路由所需渲染的组件，它支持两种类型的值：组件对象和组件构造器（即...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值