一、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
> [email protected] build
> run-p type-check "build-only {@}" --
> [email protected] type-check
> vue-tsc --build --force
> [email protected] 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 | 锁定安装的依赖版本，确保项目依赖的一致性。 |
标签：src,vue,assets,kB,笔记,js,Vue,Vue3,打包 From： https://blog.csdn.net/lizhong2008/article/details/143176149