运行 yarn build:prod 的作用是根据项目配置，通过 Vue CLI 将代码以 生产环境模式（--mode production）进行构建。以下是主要的功能和效果：
具体作用
-
执行
vue-cli-service build命令：- 将 Vue 项目打包成可部署到生产环境的静态资源文件（通常包括 HTML、CSS、JS 和其他资源文件）。
-
使用生产环境配置：
--mode production指定构建时使用.env.production文件中的变量（如 API 地址、打包优化参数等）。- 构建结果会启用生产环境优化，例如压缩代码、移除调试信息等。
-
生成静态文件：
- 输出目录默认为
dist（可以在vue.config.js中自定义）。 - 文件会经过压缩和优化，以减少体积，提高加载速度。
- 输出目录默认为
-
优化性能：
- 压缩 HTML、CSS 和 JavaScript。
- 移除未使用的代码（Tree Shaking）。
- 分割代码（Code Splitting），生成多个按需加载的文件。
- 添加资源文件的哈希值，以便实现缓存管理。
对应配置和流程
-
scripts中的定义："build:prod": "vue-cli-service build --mode production" -
构建步骤：
- Vue CLI 根据
vue.config.js和.env.production文件中定义的变量进行配置。 - 使用
webpack对代码进行编译、打包和优化。 - 将结果输出到指定目录（默认
dist）。
- Vue CLI 根据
-
典型场景：
- 构建完成后，你可以将生成的
dist目录部署到生产服务器（如 Nginx、Apache 等）或上传到 CDN。
- 构建完成后，你可以将生成的
.env.production 示例
以下是一个典型的 .env.production 文件：
VUE_APP_API_BASE_URL=https://api.example.com
VUE_APP_ENV=production
这些变量可以通过 process.env.VUE_APP_* 在代码中访问。例如：
axios.get(`${process.env.VUE_APP_API_BASE_URL}/endpoint`);
build:prod 的输出内容
运行成功后，你可以在项目的 dist 目录中找到以下内容：
index.html：入口 HTML 文件。- 优化后的资源文件（带有哈希值）：
app.[hash].js：主应用代码。chunk-vendors.[hash].js：第三方依赖库代码。app.[hash].css：应用的样式表。
这些文件经过压缩和优化，适合在生产环境中直接使用。
😊
{
"name": "order-mid-manage",
"version": "1.0.0",
"private": true,
"author": "沙漏",
"scripts": {
"serve": "concurrently \"vue-cli-service serve\"",
"dev": "concurrently \"vue-cli-service serve\"",
"serve:dev": "concurrently \"vue-cli-service serve --mode development\"",
"serve:prod": "concurrently \"vue-cli-service serve --mode production\"",
"build": "vue-cli-service build",
"build:dev": "vue-cli-service build --mode development",
"dev-to-oss": "node deploy.js dat",
"build:dev-to-oss": "vue-cli-service build --mode development && node deploy.js dat",
"build:prod": "vue-cli-service build --mode production",
"prod-to-oss": "node deploy.js prod",
"build:prod-to-oss": "vue-cli-service build --mode production && node deploy.js prod",
"oss:all": "yarn build:dev-to-oss && yarn build:prod-to-oss",
"build:stage": "vue-cli-service build --mode staging",
"lint": "vue-cli-service lint",
"mock": "cd mock && ts-node-dev mock-server.ts",
"svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "jest --clearCache && vue-cli-service test:unit"
},
"dependencies": {
"@tinymce/tinymce-vue": "^3.1.0",
"@types/moment": "^2.13.0",
"@types/swiper": "^6.0.0",
"ali-oss": "^6.17.1",
"axios": "^0.19.2",
"clipboard": "^2.0.4",
"codemirror": "^5.51.0",
"core-js": "^3.6.4",
"cors": "^2.8.5",
"default-passive-events": "^2.0.0",
"dotenv-cli": "^6.0.0",
"draggable": "^4.2.0",
"driver.js": "^0.9.8",
"echarts": "^5.4.2",
"element-ui": "^2.15.11",
"faker": "^4.1.0",
"file-saver": "^2.0.2",
"fuse.js": "^3.4.6",
"js-cookie": "^2.2.1",
"jsonlint": "^1.6.3",
"jszip": "^3.2.2",
"lodash": "^4.17.15",
"morgan": "^1.9.1",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"path-to-regexp": "^6.1.0",
"register-service-worker": "^1.6.2",
"screenfull": "^5.0.1",
"script-loader": "^0.7.2",
"simple-progress-webpack-plugin": "^1.1.2",
"sortablejs": "^1.10.2",
"swiper": "^10.0.4",
"tinymce": "^5.1.6",
"vue": "^2.6.11",
"vue-awesome-swiper": "^5.0.1",
"vue-class-component": "^7.2.2",
"vue-clipboard2": "^0.3.1",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.15.3",
"vue-image-crop-upload": "^2.5.0",
"vue-property-decorator": "^8.4.0",
"vue-router": "^3.1.5",
"vue-splitpane": "^1.0.6",
"vue-svgicon": "^3.2.6",
"vue2-dropzone": "^3.6.0",
"vuedraggable": "^2.24.3",
"vuex": "^3.1.2",
"vuex-module-decorators": "^0.16.1",
"wangeditor": "^4.7.7",
"xlsx": "^0.15.5",
"yamljs": "^0.3.0"
},
"devDependencies": {
"@types/clipboard": "^2.0.1",
"@types/codemirror": "^0.0.84",
"@types/compression": "^1.7.0",
"@types/cors": "^2.8.6",
"@types/echarts": "^4.4.3",
"@types/express": "^4.17.2",
"@types/faker": "^4.1.9",
"@types/file-saver": "^2.0.1",
"@types/jest": "^25.1.2",
"@types/js-cookie": "^2.2.4",
"@types/jszip": "^3.1.7",
"@types/lodash": "^4.14.149",
"@types/morgan": "^1.7.37",
"@types/node": "^13.7.0",
"@types/nprogress": "^0.2.0",
"@types/sortablejs": "^1.10.6",
"@types/tinymce": "^4.5.23",
"@types/webpack-env": "^1.15.1",
"@types/yamljs": "^0.2.30",
"@vue/cli-plugin-babel": "^4.2.2",
"@vue/cli-plugin-e2e-cypress": "^4.2.2",
"@vue/cli-plugin-eslint": "^4.2.2",
"@vue/cli-plugin-pwa": "^4.2.2",
"@vue/cli-plugin-router": "^4.2.2",
"@vue/cli-plugin-typescript": "^4.2.2",
"@vue/cli-plugin-unit-jest": "^4.2.2",
"@vue/cli-plugin-vuex": "^4.2.2",
"@vue/cli-service": "^4.2.2",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/eslint-config-typescript": "^4.0.0",
"@vue/test-utils": "^1.0.0-beta.31",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"concurrently": "^5.1.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.1.2",
"fibers": "^4.0.2",
"jest": "^25.1.0",
"lint-staged": "^10.0.7",
"sass": "~1.26.5",
"sass-loader": "^8.0.2",
"style-resources-loader": "^1.3.3",
"swagger-routes-express": "^3.1.2",
"ts-jest": "^25.2.0",
"ts-node-dev": "^1.0.0-pre.44",
"typescript": "^3.7.5",
"vue-cli-plugin-element": "^1.0.1",
"vue-cli-plugin-style-resources-loader": "^0.1.4",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.41.5"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"keywords": [
"vue",
"typescript",
"admin",
"template",
"element-ui"
],
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint"
]
}
}
CLI 是 Command Line Interface 的缩写，中文常译为 命令行界面。它是一种与计算机交互的方式，用户通过输入命令来执行操作，而不是通过图形用户界面（GUI）进行点击操作。
CLI 的特点
- 基于文本： 用户通过键盘输入命令，计算机以文本形式返回结果。
- 灵活强大： CLI 通常比 GUI 提供更细粒度的控制，可以实现复杂的操作和自动化。
- 广泛应用： CLI 常用于开发、运维和系统管理任务，比如文件操作、软件安装、服务配置等。
CLI 的常见用途
-
开发：
- 运行构建工具（如
npm、yarn）。 - 执行代码版本控制（如
git）。 - 使用框架工具（如
vue-cli、create-react-app）。
- 运行构建工具（如
-
运维和管理：
- 配置服务器（如通过
ssh登录）。 - 管理文件系统（如
ls、cd、mkdir等）。 - 网络调试（如
ping、curl）。
- 配置服务器（如通过
-
自动化任务：
- 编写脚本（如
.sh文件）。 - 执行定时任务。
- 编写脚本（如
CLI 的常见工具和命令示例
-
操作系统工具：
ls：列出文件和目录。cd：切换目录。mkdir：创建新目录。rm：删除文件或目录。
-
开发相关工具：
git：版本控制工具（如git commit、git push）。npm或yarn：管理 JavaScript 包。vue-cli-service：构建和运行 Vue 项目。
-
其他命令：
curl：发送网络请求。grep：查找文本内容。top：查看系统资源使用情况。
CLI 的优缺点
优点：
- 快速高效：特别是在批量任务和自动化方面。
- 占用资源少：相比 GUI 更轻量。
- 功能强大：能完成 GUI 无法实现的操作。
缺点：
- 学习曲线较高：需要记住大量命令和参数。
- 不够直观：不如 GUI 易用。
如果你是开发者，CLI 是一项非常重要的技能，可以大大提高工作效率！ 😊
扫一扫
693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
