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

最新推荐文章于 2024-07-30 15:38:01 发布

原创最新推荐文章于 2024-07-30 15:38:01 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

javascript 专栏收录该内容

2 篇文章

订阅专栏

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

环境版本

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"]
    }
  }
}