使用Vue CLI打步骤全解析是个好帮手使用懒加载和动态导入

作者：机器人技术佬 | 发布时间：2025-06-20 |

想要打包Vue代码，Vue CLI是个好帮手。下面我会用通俗易懂的语言，一步步教你怎么做。

首先，你得有Node.js和npm。怎么检查呢？在终端里敲一下：

node -v
npm -v

如果都安装了，那就继续。接下来安装Vue CLI：

npm install -g @vue/cli

安装完之后，检查一下是否成功：

vue --version

有了Vue CLI，就可以创建新项目了：

vue create my-project

然后，根据提示选择需要的特性。默认配置也挺好，或者你可以自己挑。

想要拆分代码，就用到动态导入。比如这样：

const MyComponent = () => import('./MyComponent.vue')

这样，只有当访问某个路由时，才会加载这个组件的代码。

然后你还可以在`vue.config.js`文件里配置Webpack，来进一步优化拆分：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  },
}

在项目根目录下，运行这个命令：

npm run build

这会在`dist`目录下生成打包后的文件。然后你就可以把`dist`里的内容部署到服务器上了。

部署到静态服务器，比如nginx，把`dist`里的内容放到服务器根目录，然后配置nginx指向这个目录。

或者部署到云服务，比如AWS S3，把`dist`里的内容上传到S3存储桶，并配置为静态网站托管。

在服务器上启用gzip压缩，可以减少传输的数据量。

使用代码分割插件，比如`SplitChunksPlugin`，进一步优化代码分割。

运行`npm run report`后，会生成一个报告，显示各个包的大小和依赖关系。

学会了以上步骤，你就能打包并部署Vue项目的部分代码了。为了提高性能，建议：

这些方法能帮你更好地管理和优化Vue项目，提升用户体验和应用性能。