运行与打包命令

在Vue3项目开发过程中，我们需要使用一些命令来运行和打包项目。本章节将详细介绍Vue3项目的运行和打包命令。

开发服务器命令

1. 启动开发服务器

npm run dev

• 作用：启动本地开发服务器
• 输出：会显示本地开发服务器的地址，如 http://localhost:5173/
• 特点：
  • 热模块替换：修改代码后立即看到效果，无需刷新页面
  • 自动打开浏览器：默认会自动打开浏览器
  • 错误提示：在控制台显示错误信息

2. 自定义开发服务器配置

在 vite.config.js 文件中，你可以自定义开发服务器的配置：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000, // 自定义端口
    open: true, // 自动打开浏览器
    host: true // 允许外部访问
  }
})

构建命令

1. 构建生产版本

npm run build

• 作用：构建生产版本的代码
• 输出：将构建后的文件放在 dist 目录中
• 特点：
  • 代码压缩：减小文件体积
  • 代码分割：按需加载，提高加载速度
  • 资源优化：优化图片、字体等资源

2. 预览构建结果

npm run preview

• 作用：在本地预览构建后的生产版本
• 输出：会显示预览服务器的地址，如 http://localhost:4173/
• 特点：模拟生产环境的运行情况

其他常用命令

1. 安装依赖

npm install

• 作用：安装项目依赖
• 使用场景：
  • 首次克隆项目后
  • 添加新依赖后
  • 依赖版本更新后

2. 添加依赖

# 添加生产依赖
npm install package-name

# 添加开发依赖
npm install --save-dev package-name

• 作用：添加新的依赖包
• 示例：
  • npm install vue-router：添加Vue Router
  • npm install pinia：添加Pinia
  • npm install axios：添加axios

3. 移除依赖

npm uninstall package-name

• 作用：移除不需要的依赖包

4. 更新依赖

npm update

• 作用：更新所有依赖到最新版本

5. 查看依赖

npm list

• 作用：查看项目依赖的详细信息

package.json 中的脚本命令

在 package.json 文件中，你可以看到项目的脚本命令配置：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

自定义脚本命令

你可以在 package.json 中添加自定义的脚本命令：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "test": "vitest"
  }
}

常见问题

1. 端口被占用

问题：启动开发服务器时提示端口被占用

解决方法：

• 方法1：使用其他端口，如 npm run dev -- --port 3000
• 方法2：关闭占用端口的进程
• 方法3：在 vite.config.js 中配置其他端口

2. 构建失败

问题：运行 npm run build 时构建失败

解决方法：

• 检查代码中的语法错误
• 检查依赖是否正确安装
• 检查 vite.config.js 配置是否正确

3. 依赖安装失败

问题：运行 npm install 时安装失败

解决方法：

• 检查网络连接
• 配置npm镜像源
• 清理npm缓存：npm cache clean --force

最佳实践

1. 开发流程

1. 启动开发服务器：npm run dev
2. 编写代码：在 src 目录中编写代码
3. 预览效果：在浏览器中查看效果
4. 构建项目：npm run build
5. 预览构建结果：npm run preview
6. 部署项目：将 dist 目录部署到服务器

2. 依赖管理

• 生产依赖：添加到 dependencies 中，如 vue、vue-router、pinia
• 开发依赖：添加到 devDependencies 中，如 vite、eslint、prettier
• 定期更新：定期更新依赖版本，确保安全性和性能

3. 构建优化

• 代码分割：使用动态导入，按需加载代码
• 资源优化：压缩图片、字体等资源
• 缓存策略：合理设置缓存策略，提高加载速度

总结

掌握Vue3项目的运行和打包命令是开发Vue3应用的基础。通过这些命令，你可以在本地开发和测试应用，然后构建生产版本进行部署。

在后续的章节中，我们将学习Vue3的核心基础语法，包括模板语法、数据绑定、指令等内容。