当前位置：首页 > article >正文

Vue3 学习笔记（三）Vue3 项目打包及目录结构说明

article 2024/10/23 11:38:47

一、Vue3 项目打包

我们来回顾一下前面的调试运行命令：

npm run dev

执行后输出：

  VITE v5.4.9  ready in 483 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help

在浏览器中打开：

 http://localhost:5173/

当我们准备将应用发布到生产环境时，就需要打包 Vue 项目。

打包 Vue 项目使用以下命令：

npm run build

执行命名后：

C:\Users\pc\testvue>npm run build

> testvue@0.0.0 build
> run-p type-check "build-only {@}" --


> testvue@0.0.0 type-check
> vue-tsc --build --force


> testvue@0.0.0 build-only
> vite build

vite v5.4.9 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.29 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-BI3QSdv6.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-DD_ROltr.js    0.23 kB │ gzip:  0.20 kB
dist/assets/index-Elx_ESOu.js       95.69 kB │ gzip: 37.67 kB
✓ built in 741ms

执行完成后，会在 Vue 项目下会生成一个 dist 目录

在这里插入图片描述

该目录一般包含 index.html 文件及 assets 目录，assets 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。

在这里插入图片描述

二、Vue3 项目目录结构说明

我们在 Vscode 中打开该目录，结构如下所示：

在这里插入图片描述

Vue 项目结构：

my-vue-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── vue.config.js
└── yarn.lock or package-lock.json

目录说明

目录/文件	说明
`node_modules/`	存放项目的所有依赖包，由 npm 或 yarn 自动生成和管理。
`public/`	静态文件目录，里面的文件不会被 Webpack 处理，最终会原样复制到打包目录下。
`public/favicon.ico`	网站的图标。
`public/index.html`	应用的主 HTML 文件，Vue 在构建时自动注入生成的静态资源链接。
`src/`	源代码目录，存放应用的主要代码。
`src/assets/`	存放静态资源，如图像、字体等。这些文件会由 Webpack 处理，可以通过相对路径引用。
`src/assets/logo.png`	示例图像文件。
`src/components/`	存放 Vue 组件，每个组件都是一个独立的 `.vue` 文件。
`src/components/HelloWorld.vue`	默认生成的示例组件。
`src/views/`	存放视图组件，通常对应路由，每个视图都是一个独立的 `.vue` 文件。
`src/views/Home.vue`	默认生成的主页组件。
`src/router/`	存放路由配置文件。
`src/router/index.js`	路由的配置文件，定义了应用的路由规则。
`src/App.vue`	根组件，整个应用的入口组件。
`src/main.js`	应用的入口文件，负责创建 Vue 实例并挂载到 DOM 上。
根目录配置文件
`.gitignore`	Git 忽略文件列表，指定哪些文件和目录不被包含在版本控制中。
`babel.config.js`	Babel 配置文件，指定 Babel 的编译规则。
`package.json`	项目的依赖、脚本和其他元数据。
`README.md`	项目的说明文件，通常用于描述项目、如何安装和使用等信息。
`vue.config.js`	Vue 的配置文件，用于修改默认配置。
`yarn.lock` 或 `package-lock.json`	锁定安装的依赖版本，确保项目依赖的一致性。