Vue打包没有包含懒加载路由

阿明今天不练腿

于 2022-08-31 10:58:58 发布

阅读量341

点赞数

分类专栏： javascript 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/codecat_yi/article/details/126619404

版权

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决Vue项目中使用vite打包时遇到的vue-router懒加载失效的问题。通过安装并配置@babel/plugin-syntax-dynamic-import插件，实现了对动态导入语法的支持，从而解决了懒加载功能无法正常工作的情况。

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

环境版本

NodeJs：v14.18.1

@vue/cli 4.5.15

babel 6.26.0 (babel-core 6.26.3)

项目是若依

参考文档

【vue-router踩坑】使用vite打包项目vue-router懒加载无效】

操作步骤

安装syntax-dynamic-import插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

修改项目babel.config.js文件

原来用的插件是dynamic-import-node，改成syntax-dynamic-import

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // 'plugins': ['dynamic-import-node']
      'plugins': ["syntax-dynamic-import"]
    }
  }
}

打包