前端vue2、vue3框架是我们最近常用的框架，今天我们分析一下配置基础信息、详解其中的功能含义。
1、vue.config.js 文件分析
这个 vue.config.js 文件是 Vue CLI 项目中用于配置项目构建行为和开发环境设置的文件。它能够让开发者定制打包、代理、路径、样式等方面的内容。
vue2、3默认配置：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
添加修改后的配置
const { defineConfig } = require('@vue/cli-service') // 引入 Vue CLI 的配置定义函数，用于创建配置对象。
module.exports = defineConfig({ // 导出配置对象，使用 defineConfig 是为了提供类型支持和配置验证。
transpileDependencies: true, // 转译依赖中的代码，避免在某些浏览器上不兼容的问题（常用于编译第三方库）。
publicPath: '/', // 部署应用时的根路径，默认是 '/'，即根目录。可以根据部署环境修改，比如 '/app/'。
outputDir: 'yd-common-vue2-dist', // 构建（打包）后生成的文件目录。这里指定打包后的文件将输出到 'big-web-dist' 目录。
lintOnSave: false, // 关闭保存文件时的代码格式检查（ESLint），减少在开发时的干扰。
productionSourceMap: false, // 生产环境下不生成 source map 文件。关闭后可以减少打包体积，并且避免代码泄露。
// 配置开发服务器的一些行为
devServer: {
open: true, // 自动打开浏览器窗口。
host: 'localhost', // 开发服务器的主机名。'localhost' 表示只允许本机访问。
port: 8088, // 开发服务器的端口号。
client: {
overlay: false, // 如果出现编译错误或警告，不在浏览器窗口中显示覆盖层提示。
},
// 配置代理，解决开发时跨域请求的问题
// proxy: {
// [process.env.APP_API]: { // 动态读取环境变量中的 API 基地址，进行代理。
// target: process.env.APP_HOST, // 代理的目标地址，指向后端 API 服务器（从环境变量中读取）。
// changeOrigin: true, // 允许修改请求的主机头，伪装成代理目标地址的请求来源。
// ws: false, // 不代理 WebSocket 连接。
// headers: {
// Connection: 'keep-alive' // 为了解决 Mac 系统下代理失败问题，保持长连接。
// },
// pathRewrite: {
// ['^' + process.env.VUE_APP_BASE_API]: '' // 路径重写，去掉 API 前缀部分，使请求地址匹配目标服务器的路径。
// }
// }
// }
},
// webpack 相关配置的链式修改
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store // 获取处理 SCSS 文件的规则（oneOfsMap），用于对其修改。
oneOfsMap.forEach(item => { // 遍历每一条 SCSS 处理规则。
item
.use('sass-resources-loader') // 添加 'sass-resources-loader' 处理器。
.loader('sass-resources-loader') // 指定使用的 loader 是 'sass-resources-loader'。
.options({
resources: [
'./src/style/vars.scss', // 指定全局引入的 SCSS 文件，通常用于定义全局的 SCSS 变量和样式。
]
})
.end() // 结束链式调用。
})
}
})
此配置就比较全了，开发项目可以使用。
2、README.md 配置分析
# yd-common-vue2
## Project setup 命令用于安装项目所需的依赖包。
```
npm install
```
### Compiles and hot-reloads for development 啟動項目
```
npm run serve
```
### Compiles and minifies for production 項目打包
```
npm run build
```
### Lints and fixes files 命令用于运行 ESLint 工具检查代码质量。
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
此配置文件一般不需要变化。
3、package.json 文件解析
package.json 是一个重要的配置文件，管理项目的依赖、脚本、元数据等。以下是每一行代码的注释和含义：
初始化的vue2配置：
{
"name": "yd-common-vue2",
"version": "0.8.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@turf/turf": "^7.0.0",
"animate.css": "^3.7.2",
"axios": "^1.6.8",
"core-js": "^3.8.3",
"echarts": "^5.5.0",
"echarts-gl": "^2.0.9",
"echarts-liquidfill": "^3.1.0",
"element-ui": "^2.15.14",
"js-base64": "^3.7.7",
"js-cookie": "^3.0.5",
"node-sass": "^5.0.0",
"ol": "^9.1.0",
"pdfjs-dist": "^2.5.207",
"qs": "^6.13.0",
"sass-loader": "^10.1.1",
"sass-resources-loader": "^2.2.5",
"swiper": "^3.4.2",
"v-scale-screen": "^1.0.0",
"vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3",
"vue-irrigation-tiny-tools": "^0.4.39",
"vue-pdf": "^4.2.0",
"vue-router": "^3.5.3",
"vue-seamless-scroll": "^1.1.23",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"file-loader": "^6.2.0",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 5%",
"last 2 versions",
"not dead"
]
}
初始化的vue3默认配置：
{
"name": "yd-common-vue3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
添加注释后和业务包的配置：
{
"name": "yd-common-vue2", // 项目的名称
"version": "0.8.0", // 项目的版本号
"private": true, // 表示该项目是私有的，防止被意外发布到 npm
"scripts": { // 项目中可执行的脚本命令
"serve": "vue-cli-service serve", // 运行开发服务器的命令，使用 vue-cli 启动本地服务器
"build": "vue-cli-service build", // 构建项目用于生产环境
"lint": "vue-cli-service lint" // 检查代码是否符合 eslint 规则
},
"dependencies": { // 生产环境的依赖，项目运行时需要的库
"@amap/amap-jsapi-loader": "^1.0.1", // 高德地图 API 加载器
"@turf/turf": "^7.0.0", // 用于空间分析和地理数据处理的 JavaScript 库
"animate.css": "^3.7.2", // CSS 动画库
"axios": "^1.6.8", // 基于 Promise 的 HTTP 客户端，用于与后端通信
"core-js": "^3.8.3", // JavaScript 标准库的 polyfill，用于兼容旧浏览器
"echarts": "^5.5.0", // 图表库 ECharts
"echarts-gl": "^2.0.9", // ECharts 的 WebGL 扩展，用于3D图表
"echarts-liquidfill": "^3.1.0", // ECharts 的水球图插件
"element-ui": "^2.15.14", // Element UI 库，Vue 的组件库
"js-base64": "^3.7.7", // 用于 Base64 编码和解码的库
"js-cookie": "^3.0.5", // 用于操作 cookie 的库
"node-sass": "^5.0.0", // Sass 编译器，用于将 Sass 代码编译为 CSS
"ol": "^9.1.0", // OpenLayers，用于地图显示和操作的库
"pdfjs-dist": "^2.5.207", // PDF.js 库，用于在浏览器中显示 PDF
"qs": "^6.13.0", // 一个解析和格式化 URL 查询字符串的库
"sass-loader": "^10.1.1", // 用于处理 Sass 文件的 Webpack loader
"sass-resources-loader": "^2.2.5", // 用于自动加载 Sass 资源的 Webpack loader
"swiper": "^3.4.2", // 轮播图插件 Swiper
"v-scale-screen": "^1.0.0", // 用于自适应缩放屏幕的 Vue 插件
"vue": "^2.6.14", // Vue.js 版本 2.x
"vue-awesome-swiper": "^3.1.3", // Vue 的 Swiper 插件
"vue-irrigation-tiny-tools": "^0.4.39", // Vue 项目中使用的小工具库
"vue-pdf": "^4.2.0", // 用于在 Vue 中显示 PDF 的插件
"vue-router": "^3.5.3", // Vue 的路由库
"vue-seamless-scroll": "^1.1.23", // Vue 的无缝滚动插件
"vuex": "^3.6.2" // Vuex 状态管理库
},
"devDependencies": { // 开发环境的依赖，开发过程中使用的工具和库
"@babel/core": "^7.12.16", // Babel 的核心，用于将 ES6+ 代码转换为 ES5
"@babel/eslint-parser": "^7.12.16", // Babel 的 ESLint 解析器，支持新的 JavaScript 语法
"@vue/cli-plugin-babel": "~5.0.0", // Vue CLI 的 Babel 插件
"@vue/cli-plugin-eslint": "~5.0.0", // Vue CLI 的 ESLint 插件
"@vue/cli-service": "~5.0.0", // Vue CLI 服务，提供开发和构建工具
"eslint": "^7.32.0", // JavaScript 代码检查工具 ESLint
"eslint-plugin-vue": "^8.0.3", // ESLint 的 Vue 插件，用于检查 Vue 代码
"file-loader": "^6.2.0", // 用于处理文件的 Webpack loader
"vue-template-compiler": "^2.6.14" // 用于编译 Vue 模板的库，必须与 Vue 版本匹配
},
"eslintConfig": { // ESLint 的配置
"root": true, // 指定这是根配置文件，不会再往父级查找
"env": {
"node": true // 运行环境是 Node.js
},
"extends": [ // 继承的规则集
"plugin:vue/essential", // Vue 官方推荐的 ESLint 配置
"eslint:recommended" // ESLint 推荐的配置
],
"parserOptions": {
"parser": "@babel/eslint-parser" // 使用 Babel 的 ESLint 解析器
},
"rules": {} // 自定义的规则，当前为空
},
"browserslist": [ // 浏览器兼容性列表
"> 5%", // 支持市场份额大于 1% 的浏览器
"last 3 versions", // 支持最新的两个浏览器版本
"not dead" // 不支持不再维护的浏览器
]
}
4、jsconfig.json 配置信息
jsconfig.json是一个配置文件，主要用于配置 JavaScript 项目的编译选项和路径别名，特别是在使用 VSCode 等开发工具时，这个文件帮助提高开发体验。它与 tsconfig.json 类似，但专用于纯 JavaScript 项目。
{
"compilerOptions": {
"target": "es5", // 设置编译目标版本为 ECMAScript 5，保证生成的代码兼容老版本浏览器
"module": "esnext", // 指定模块使用最新的 ES 模块规范 (ESNext)
"baseUrl": "./", // 配置模块解析的基础路径为当前项目的根目录
"moduleResolution": "node", // 模块解析策略为 node 方式（即遵循 Node.js 的模块解析机制）
"paths": {
"@/*": [ // 配置路径别名，把 @ 映射为 src 目录
"src/*" // 让 @ 符号代表 src 文件夹，便于使用绝对路径导入模块
]
},
"lib": [
"esnext", // 包含 ECMAScript 最新版本的功能
"dom", // 包含 DOM API 的声明
"dom.iterable", // 包含可迭代 DOM 接口的声明，例如 `NodeList` 和 `HTMLCollection`
"scripthost" // 包含 Windows Script Host (WSH) 的类型声明，提供主机环境的 API
]
}
}
5、babel.config.js 配置信息
babel.config.js 是 Babel 的配置文件，Babel 是一个 JavaScript 编译器，主要用于将现代 JavaScript 代码转换为向后兼容的版本，以便在旧版本的浏览器中运行。这个配置文件告诉 Babel 如何处理代码转换。
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset' // 使用 Vue CLI 提供的 Babel 预设配置
]
}
6、.gitignore 配置信息
文件用于定义哪些文件或目录在使用 Git 进行版本控制时需要忽略，也就是说，这些文件或文件夹不会被提交到 Git 仓库中。以下是每一行的具体含义及作用：
.DS_Store # 忽略 macOS 系统自动生成的 .DS_Store 文件（通常用于保存文件夹的自定义属性）
node_modules # 忽略 Node.js 项目中的依赖库文件夹 node_modules（这些依赖可以通过 npm 或 yarn 重新安装）
/dist # 忽略打包后的静态资源文件夹 dist，通常是生产环境构建后的文件
/yd-common-vue2-dist # 忽略另一个自定义的打包目录 yd-common-vue2-dist，可能是项目的输出文件夹
# local env files
.env.local # 忽略本地环境变量配置文件 .env.local（不希望将个人或本地环境配置提交到版本控制中）
.env.*.local # 忽略所有带有 `.local` 后缀的环境变量文件（如 `.env.production.local`）
# Log files
npm-debug.log* # 忽略 npm 运行过程中的调试日志文件（包括所有匹配 `npm-debug.log*` 的文件）
yarn-debug.log* # 忽略 yarn 运行过程中的调试日志文件
yarn-error.log* # 忽略 yarn 运行过程中的错误日志文件
pnpm-debug.log* # 忽略 pnpm（另一种包管理工具）产生的调试日志文件
# Editor directories and files
.idea # 忽略 JetBrains 系列（如 WebStorm、IntelliJ IDEA）编辑器生成的项目文件夹 .idea
.vscode # 忽略 Visual Studio Code 编辑器生成的项目文件夹 .vscode
*.suo # 忽略 Visual Studio 的解决方案用户选项文件
*.ntvs* # 忽略 Node.js Tools for Visual Studio 生成的文件
*.njsproj # 忽略 Visual Studio 项目的 Node.js 项目文件
*.sln # 忽略 Visual Studio 的解决方案文件
*.sw? # 忽略 Vim 编辑器的交换文件（如 `.swp`, `.swo` 等）
*.zip # 忽略所有以 `.zip` 结尾的压缩文件
node_modules
7、vue项目中public 和src目录两者有什么区别
8、核心代码文件
src\main.js、src\App.vue、public\index.html等启动用的核心代码文件。
前端vue框架配置基础信息详解分析完毕，下一篇我们分析vue集成oi地图功能，敬请期待！