分别使用webpack和vite构建vue3项目

在 Vue 3 项目中，可以分别使用 Webpack 和 Vite 进行项目构建。两者的配置过程略有不同。下面是分别使用 Webpack 和 Vite 构建 Vue 3 项目的步骤。

一、使用 Webpack 构建 Vue 3 项目

Webpack 是一个成熟的打包工具，Vue CLI 提供了对 Webpack 的支持。以下是通过 Vue CLI 使用 Webpack 构建 Vue 3 项目的步骤：

1. 安装 Vue CLI

如果你没有安装 Vue CLI，首先通过 npm 或 yarn 进行安装：

npm install -g @vue/cli
# or
yarn global add @vue/cli

2. 创建 Vue 3 项目

使用 Vue CLI 创建一个 Vue 3 项目：

vue create my-vue3-webpack-project

在选择预设时，确保选择 Vue 3。

3. 选择 Webpack 配置

Vue CLI 默认使用 Webpack，因此你无需手动配置 Webpack。创建项目时，Vue CLI 会自动生成适用于 Vue 3 的 Webpack 配置。

如果需要自定义 Webpack 配置，你可以在项目的根目录下创建或修改 vue.config.js 文件来覆盖默认配置。例如：

// vue.config.js
module.exports = {
  configureWebpack: {
    // 自定义 webpack 配置
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

4. 启动开发服务器

npm run serve

5. 打包生产环境

npm run build

二、使用 Vite 构建 Vue 3 项目

Vite 是一个更现代的构建工具，具有更快的启动速度和模块热替换（HMR）功能，非常适合 Vue 3。以下是使用 Vite 构建 Vue 3 项目的步骤：

1. 安装 Vite

你可以通过 npm 或 yarn 安装 Vite：

npm create vite@latest
# or
yarn create vite

2. 创建 Vue 3 项目

在创建项目时，选择 Vue 模板，并确认使用 Vue 3：

npm create vite@latest my-vue3-vite-project

在命令提示中选择 Vue，然后 Vite 会为你生成 Vue 3 项目的基础结构。

3. 安装依赖

进入项目目录并安装依赖：

cd my-vue3-vite-project
npm install

4. 启动开发服务器

Vite 提供非常快的开发服务器，可以用以下命令启动：

npm run dev

Vite 服务器会在 localhost:5173 或其他指定端口启动。

5. 打包生产环境

Vite 也支持快速构建生产环境的代码：

npm run build

6. Vite 项目结构

vite.config.js 是 Vite 的配置文件，如果需要自定义 Vite 的配置，你可以在这个文件中修改。例如：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

总结

• 使用 Webpack：通过 Vue CLI 创建 Vue 3 项目，默认使用 Webpack 进行打包。如果需要自定义配置，可以通过 vue.config.js 修改 Webpack 配置。

• 使用 Vite：通过 Vite 创建 Vue 3 项目，提供更快的开发体验，推荐在新项目中使用。通过修改 vite.config.js 文件来自定义 Vite 配置。

Vite 更加轻量和现代，适合快速开发和现代化的项目构建。Webpack 则更成熟且有广泛的社区支持，适用于需要复杂构建配置的大型项目。