vue-router按需引入报错方法解决

最新推荐文章于 2025-03-21 16:06:29 发布

笑笑的微笑

最新推荐文章于 2025-03-21 16:06:29 发布

阅读量5k

点赞数 1

文章标签：前端 vue 路由错误及解决方法

本文链接：https://blog.youkuaiyun.com/pz3305636904/article/details/103324477

版权

本文详细介绍了在使用Vue-router进行组件按需加载时遇到的SyntaxError问题及解决方案，涉及babel-plugin-syntax-dynamic-import的正确配置与安装，以及如何避免权限错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue-router按需引入的时候报错：

 error  in ./src/router/index.js

Syntax Error: Unexpected token (37:21)

  35 |     name:'Login',
  36 |     path: '/login',
> 37 |     component: () => import ('../views/Login.vue'),
     |                      ^
  38 |   }

从网上查阅了资料，说使用babel插件syntax-dynamic-import``，才能正确的解析语法：

cnpm install babel-plugin-syntax-dynamic-import --save-dev

但我安装后报：Error: EPERM: operation not permitted, symlink ‘C:\Users\pengzhi\Documents\code\web\simpleblog\node_modules_babel-plugin-syntax-dynamic-import@6.18.0@babel-plugin-syntax-dynamic-import’ -> 'C:\Users\pengzhi\Documents\code\web\simpleblog\node_modules\babel-plugin-syntax-dynamic-import’npminstall version: 3.23.0npminstall args: C:\Program Files\nodejs\node.exe C:\Users\pengzhi\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\bin\install.js --fix-bug-versions --china --userconfig=C:\Users\pengzhi.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://r.npm.taobao.org babel-plugin-syntax-dynamic-import --save-dev

英语我也只是初略懂一二，其中一个单词symlink：可能时相同的连接，就在node_modules中找到_babel-plugin-syntax-dynamic-import@6.18.0@babel-plugin-syntax-dynamic-import’的包，全删了；

再到package.json文件中查看是否有babel-plugin-syntax-dynamic-import的引入；
若有，直接
cnpm install；若无，再次cnpm install babel-plugin-syntax-dynamic-import --save-dev
然后解决了问题！

结果截图：
在这里插入图片描述