文章总结： 文章介绍了Vue工程的创建和打包方法，包括两种主要方式：基于Vite的create-vue（官方推荐）和基于webpack的VueCLI。详细说明了两种方式的安装、创建和启动步骤，以及如何使用npmrunbuild进行工程打包。对于预览打包结果，Vue2需要安装serve并运行，而Vue3可以直接使用npmrunpreview命令。文章提供了具体的命令示例和package.json配置说明。 综合评分： 83 文章分类： 安全开发,其他

VUE工程创建及打包

原创

静观云起

码云精炼

2025年12月14日 15:17 广东

一 工程创建

方式一 使用create-vue(官方推荐，基于Vite)

1. 确保已安装Node.js(建议版本 ≥ 16)

2. 打开终端，运行以下命令创建项目：

npm create vue@latest 项目名称

3. 按提示输入项目信息(如项目名、是否使用 TypeScript、Router、Pinia等)

使用Vite(如 create-vue/Vue3新项目)的package.json:

"scripts": {  // 启动开发服务器  "dev": "vite",  // 打包  "build": "vite build",  // 预览打包结果  "preview": "vite preview"}

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

// 进入项目目录cd 项目名称npm install

5. 启动开发服务器

// Vue3 推荐，启动速度快npm run dev

方式二 使用Vue CLI(较传统，基于webpack)

1. 全局安装 Vue CLI(如未安装)

npm install -g @vue/cli

2. 创建项目

vue create 项目名称

3. 选择Vue配置

使用Vue CLI(如 Vue2 项目)的package.json:

"scripts": {  "serve": "vue-cli-service serve",  // 启动开发服务器  "build": "vue-cli-service build"   // 打包}

*注意：Vue CLI 本身没有提供类似 npm run preview 的官方脚本，需要手动用 serve 或其他静态服务器查看*

4. 进入项目并启动

cd 项目名称// VUE2项目，相对较慢npm run serve

二 工程打包

在项目根目录下执行以下命令进行生产环境打包

npm run build

打包后，生成的静态文件默认在 dist/ 目录下，包括：

index.html 入口HTML文件

assets/ 打包后的JS、CSS等静态资源

三 预览打包结果

vue2 如果你想本地预览打包后的效果，可以安装并运行 serve

1. 全局安装 serve(如未安装)

npm install -g serve

2. 进入 dist 目录并启动服务

cd distserve

默认会运行在 http://localhost:3000

Vue3直接运行 npm run preview 快速预览生产构建效果

查看原文：《VUE工程创建及打包》