【Web应用】Vue 项目前端项目文件夹和文件介绍

---

标题	详情
作者	JosieBook
头衔	CSDN博客专家资格、阿里云社区专家博主、软件设计工程师
博客内容	开源、框架、软件工程、全栈（,NET/Java/Python/C++）、数据库、操作系统、大数据、人工智能、工控、网络、程序人生
口号	成为你自己，做你想做的
欢迎三连	👍点赞、✍评论、⭐收藏

⭐前言

在 Vue 项目中，文件夹和文件的组织结构对于项目的开发和维护至关重要。本文将详细介绍一个典型的 Vue 项目中的各个文件夹和文件的作用，并帮助你更好地理解和管理你的项目。

⭐一、文件夹介绍

🌟1、.idea

这是一个由 JetBrains 的 IDE（如 WebStorm、IntelliJ IDEA）生成的文件夹，用于存储项目的配置信息。如果你使用的是其他编辑器，这个文件夹可以忽略。

🌟2、bin

这个文件夹通常用于存放可执行文件或脚本文件。在 Vue 项目中，它可能包含一些用于构建或运行项目的脚本。

🌟3、build

这个文件夹通常用于存放构建工具生成的文件。在 Vue 项目中，它可能包含一些用于构建项目的配置文件和脚本。

🌟4、node_modules

这个文件夹用于存放项目依赖的 Node.js 模块。当你使用 npm 或 yarn 安装依赖时，这些模块会被自动下载并存放在这个文件夹中。

🌟5、public

这个文件夹用于存放项目中的静态资源文件，如图片、字体等。这些文件会被直接复制到构建后的输出目录中。

🌟6、src

这个文件夹是项目的主要源代码目录。它包含了 Vue 组件、路由配置、样式文件等。通常，你会在这个文件夹中编写大部分的项目代码。

⭐二、文件介绍

🌟1、.editorconfig

这是一个用于定义代码编辑器配置的文件。它可以帮助你在不同的编辑器和环境中保持一致的代码风格。

# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true# 匹配全部文件
[*]
# 设置字符集
charset = utf-8
# 缩进风格，可选space、tab
indent_style = space
# 缩进的空格数
indent_size = 2
# 结尾换行符，可选lf、cr、crlf
end_of_line = lf
# 在文件结尾插入新行
insert_final_newline = true
# 删除一行中的前后空格
trim_trailing_whitespace = true# 匹配md结尾的文件
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

🌟2、.env.development、.env.production、.env.staging

这些文件用于定义不同环境下的环境变量。例如，.env.development 文件中的变量会在开发环境中生效，而 .env.production 文件中的变量会在生产环境中生效。

• .env.development
  这个文件用于定义开发环境下的环境变量。当你在本地开发项目时，这些变量会生效。例如，你可以在这里定义开发环境的 API 地址、数据库连接信息等。

# 页面标题
VUE_APP_TITLE = 若依管理系统# 开发环境配置
ENV = 'development'# 若依管理系统/开发环境
#VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'https://vue.ruoyi.vip/prod-api'# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

• .env.production
  这个文件用于定义生产环境下的环境变量。当你在生产环境中部署项目时，这些变量会生效。例如，你可以在这里定义生产环境的 API 地址、数据库连接信息等。

# 页面标题
VUE_APP_TITLE = 若依管理系统# 生产环境配置
ENV = 'production'# 若依管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'

• .env.staging
  这个文件用于定义测试环境下的环境变量。当你在测试环境中部署项目时，这些变量会生效。例如，你可以在这里定义测试环境的 API 地址、数据库连接信息等。

# 页面标题
VUE_APP_TITLE = 若依管理系统BABEL_ENV = productionNODE_ENV = production# 测试环境配置
ENV = 'staging'# 若依管理系统/测试环境
VUE_APP_BASE_API = '/stage-api'

🌟3、.eslintignore

这个文件用于定义 ESLint 忽略检查的文件或目录。你可以在这里列出一些不需要进行代码风格检查的文件或目录。

# 忽略build目录下类型为js的文件的语法检查
build/*.js
# 忽略src/assets目录下文件的语法检查
src/assets
# 忽略public目录下文件的语法检查
public
# 忽略当前目录下为js的文件的语法检查
*.js
# 忽略当前目录下为vue的文件的语法检查
*.vue

🌟4、.eslintrc.js

这个文件用于配置 ESLint 的规则。你可以在这里定义代码风格、错误检查等规则。

// ESlint 检查配置
module.exports = {root: true,parserOptions: {parser: 'babel-eslint',sourceType: 'module'},env: {browser: true,node: true,es6: true,},extends: ['plugin:vue/recommended', 'eslint:recommended'],// add your custom rules here//it is base on https://github.com/vuejs/eslint-config-vuerules: {"vue/max-attributes-per-line": [2, {"singleline": 10,"multiline": {"max": 1,"allowFirstLine": false}}],"vue/singleline-html-element-content-newline": "off","vue/multiline-html-element-content-newline":"off","vue/name-property-casing": ["error", "PascalCase"],"vue/no-v-html": "off",'accessor-pairs': 2,'arrow-spacing': [2, {'before': true,'after': true}],'block-spacing': [2, 'always'],'brace-style': [2, '1tbs', {'allowSingleLine': true}],'camelcase': [0, {'properties': 'always'}],'comma-dangle': [2, 'never'],'comma-spacing': [2, {'before': false,'after': true}],'comma-style': [2, 'last'],'constructor-super': 2,'curly': [2, 'multi-line'],'dot-location': [2, 'property'],'eol-last': 2,'eqeqeq': ["error", "always", {"null": "ignore"}],'generator-star-spacing': [2, {'before': true,'after': true}],'handle-callback-err': [2, '^(err|error)$'],'indent': [2, 2, {'SwitchCase': 1}],'jsx-quotes': [2, 'prefer-single'],'key-spacing': [2, {'beforeColon': false,'afterColon': true}],'keyword-spacing': [2, {'before': true,'after': true}],'new-cap': [2, {'newIsCap': true,'capIsNew': false}],'new-parens': 2,'no-array-constructor': 2,'no-caller': 2,'no-console': 'off','no-class-assign': 2,'no-cond-assign': 2,'no-const-assign': 2,'no-control-regex': 0,'no-delete-var': 2,'no-dupe-args': 2,'no-dupe-class-members': 2,'no-dupe-keys': 2,'no-duplicate-case': 2,'no-empty-character-class': 2,'no-empty-pattern': 2,'no-eval': 2,'no-ex-assign': 2,'no-extend-native': 2,'no-extra-bind': 2,'no-extra-boolean-cast': 2,'no-extra-parens': [2, 'functions'],'no-fallthrough': 2,'no-floating-decimal': 2,'no-func-assign': 2,'no-implied-eval': 2,'no-inner-declarations': [2, 'functions'],'no-invalid-regexp': 2,'no-irregular-whitespace': 2,'no-iterator': 2,'no-label-var': 2,'no-labels': [2, {'allowLoop': false,'allowSwitch': false}],'no-lone-blocks': 2,'no-mixed-spaces-and-tabs': 2,'no-multi-spaces': 2,'no-multi-str': 2,'no-multiple-empty-lines': [2, {'max': 1}],'no-native-reassign': 2,'no-negated-in-lhs': 2,'no-new-object': 2,'no-new-require': 2,'no-new-symbol': 2,'no-new-wrappers': 2,'no-obj-calls': 2,'no-octal': 2,'no-octal-escape': 2,'no-path-concat': 2,'no-proto': 2,'no-redeclare': 2,'no-regex-spaces': 2,'no-return-assign': [2, 'except-parens'],'no-self-assign': 2,'no-self-compare': 2,'no-sequences': 2,'no-shadow-restricted-names': 2,'no-spaced-func': 2,'no-sparse-arrays': 2,'no-this-before-super': 2,'no-throw-literal': 2,'no-trailing-spaces': 2,'no-undef': 2,'no-undef-init': 2,'no-unexpected-multiline': 2,'no-unmodified-loop-condition': 2,'no-unneeded-ternary': [2, {'defaultAssignment': false}],'no-unreachable': 2,'no-unsafe-finally': 2,'no-unused-vars': [2, {'vars': 'all','args': 'none'}],'no-useless-call': 2,'no-useless-computed-key': 2,'no-useless-constructor': 2,'no-useless-escape': 0,'no-whitespace-before-property': 2,'no-with': 2,'one-var': [2, {'initialized': 'never'}],'operator-linebreak': [2, 'after', {'overrides': {'?': 'before',':': 'before'}}],'padded-blocks': [2, 'never'],'quotes': [2, 'single', {'avoidEscape': true,'allowTemplateLiterals': true}],'semi': [2, 'never'],'semi-spacing': [2, {'before': false,'after': true}],'space-before-blocks': [2, 'always'],'space-before-function-paren': [2, 'never'],'space-in-parens': [2, 'never'],'space-infix-ops': 2,'space-unary-ops': [2, {'words': true,'nonwords': false}],'spaced-comment': [2, 'always', {'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']}],'template-curly-spacing': [2, 'never'],'use-isnan': 2,'valid-typeof': 2,'wrap-iife': [2, 'any'],'yield-star-spacing': [2, 'both'],'yoda': [2, 'never'],'prefer-const': 2,'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,'object-curly-spacing': [2, 'always', {objectsInObjects: false}],'array-bracket-spacing': [2, 'never']}
}

🌟5、.gitignore

这个文件用于定义 Git 忽略的文件或目录。你可以在这里列出一些不需要进行版本控制的文件或目录，如 node_modules 文件夹。

.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
**/*.logtests/**/coverage/
tests/e2e/reports
selenium-debug.log# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.localpackage-lock.json
yarn.lock

🌟6、.gitlab-ci.yml

这个文件用于定义 GitLab CI/CD 的配置。它可以帮助你自动化项目的构建、测试和部署流程。

🌟7、babel.config.js

这个文件用于配置 Babel。Babel 是一个 JavaScript 编译器，它可以将新的 JavaScript 语法转换为旧的语法，以便在不同的环境中运行。

module.exports = {presets: [// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app'@vue/cli-plugin-babel/preset'],'env': {'development': {// babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().// This plugin can significantly increase the speed of hot updates, when you have a large number of pages.'plugins': ['dynamic-import-node']}}
}

🌟8、package.json

这个文件用于定义项目的元数据和依赖。它包含了项目的名称、版本、描述、作者、许可证等信息，以及项目的依赖和脚本。

{"name": "ruoyi","version": "3.8.9","description": "若依管理系统","author": "若依","license": "MIT","scripts": {"dev": "vue-cli-service serve","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging","preview": "node build/index.js --preview","lint": "eslint --ext .js,.vue src"},"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"src/**/*.{js,vue}": ["eslint --fix","git add"]},"keywords": ["vue","admin","dashboard","element-ui","boilerplate","admin-template","management-system"],"repository": {"type": "git","url": "https://gitee.com/y_project/RuoYi-Vue.git"},"dependencies": {"@riophae/vue-treeselect": "0.4.0","axios": "0.28.1","clipboard": "2.0.8","core-js": "3.37.1","echarts": "5.4.0","element-ui": "2.15.14","file-saver": "2.0.5","fuse.js": "6.4.3","highlight.js": "9.18.5","js-beautify": "1.13.0","js-cookie": "3.0.1","jsencrypt": "3.0.0-rc.1","nprogress": "0.2.0","quill": "2.0.2","screenfull": "5.0.2","sortablejs": "1.10.2","splitpanes": "2.4.1","vue": "2.6.12","vue-count-to": "1.0.13","vue-cropper": "0.5.5","vue-meta": "2.4.0","vue-router": "3.4.9","vuedraggable": "2.24.3","vuex": "3.6.0"},"devDependencies": {"@vue/cli-plugin-babel": "4.4.6","@vue/cli-plugin-eslint": "4.4.6","@vue/cli-service": "4.4.6","babel-eslint": "10.1.0","babel-plugin-dynamic-import-node": "2.3.3","chalk": "4.1.0","compression-webpack-plugin": "6.1.2","connect": "3.6.6","eslint": "7.15.0","eslint-plugin-vue": "7.2.0","lint-staged": "10.5.3","sass": "1.32.13","sass-loader": "10.1.1","script-ext-html-webpack-plugin": "2.1.5","svg-sprite-loader": "5.1.1","vue-template-compiler": "2.6.12"},"engines": {"node": ">=8.9","npm": ">= 3.0.0"},"browserslist": ["> 1%","last 2 versions"]
}

🌟9、package-lock.json

这个文件用于锁定项目的依赖版本。它可以帮助你在不同的环境中安装相同的依赖版本，避免因为依赖版本不同而导致的问题。

🌟10、README.md

这个文件用于编写项目的文档。它通常包含了项目的介绍、安装指南、使用说明等信息。

## 开发```bash
# 克隆项目
git clone https://gitee.com/y_project/RuoYi-Vue# 进入项目目录
cd ruoyi-ui# 安装依赖
npm install# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com# 启动服务
npm run dev

浏览器访问 http://localhost:80

发布

# 构建测试环境
npm run build:stage# 构建生产环境
npm run build:prod

🌟11、vue.config.js

这个文件用于配置 Vue CLI。你可以在这里定义项目的构建选项、插件等。

'use strict'
const path = require('path')function resolve(dir) {return path.join(__dirname, dir)
}const CompressionPlugin = require('compression-webpack-plugin')const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题const baseUrl = 'http://localhost:8080' // 后端接口const port = process.env.port || process.env.npm_config_port || 80 // 端口// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {// 部署生产环境和开发环境下的URL。// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。publicPath: process.env.NODE_ENV === "production" ? "/" : "/",// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）outputDir: 'dist',// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）assetsDir: 'static',// 是否开启eslint保存检测，有效值：ture | false | 'error'lintOnSave: process.env.NODE_ENV === 'development',// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。productionSourceMap: false,transpileDependencies: ['quill'],// webpack-dev-server 相关配置devServer: {host: '0.0.0.0',port: port,open: true,proxy: {// detail: https://cli.vuejs.org/config/#devserver-proxy[process.env.VUE_APP_BASE_API]: {target: baseUrl,changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}},// springdoc proxy'^/v3/api-docs/(.*)': {target: baseUrl,changeOrigin: true}},disableHostCheck: true},css: {loaderOptions: {sass: {sassOptions: { outputStyle: "expanded" }}}},configureWebpack: {name: name,resolve: {alias: {'@': resolve('src')}},plugins: [// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件new CompressionPlugin({cache: false,                                  // 不启用文件缓存test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i,  // 压缩文件格式filename: '[path][base].gz[query]',            // 压缩后的文件名algorithm: 'gzip',                             // 使用gzip压缩minRatio: 0.8,                                 // 压缩比例，小于 80% 的文件不会被压缩deleteOriginalAssets: false                    // 压缩后删除原文件})],},chainWebpack(config) {config.plugins.delete('preload') // TODO: need testconfig.plugins.delete('prefetch') // TODO: need test// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()config.when(process.env.NODE_ENV !== 'development', config => {config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin', [{// `runtime` must same as runtimeChunk name. default is `runtime`inline: /runtime\..*\.js$/}]).end()config.optimization.splitChunks({chunks: 'all',cacheGroups: {libs: {name: 'chunk-libs',test: /[\\/]node_modules[\\/]/,priority: 10,chunks: 'initial' // only package third parties that are initially dependent},elementUI: {name: 'chunk-elementUI', // split elementUI into a single packagetest: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpmpriority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app},commons: {name: 'chunk-commons',test: resolve('src/components'), // can customize your rulesminChunks: 3, //  minimum common numberpriority: 5,reuseExistingChunk: true}}})config.optimization.runtimeChunk('single')})}
}

⭐总结

通过本文的介绍，你应该对 Vue 项目中的各个文件夹和文件有了一个基本的了解。在实际开发中，你可以根据项目的需要对这些文件夹和文件进行适当的调整和扩展。希望本文能帮助你更好地管理和维护你的 Vue 项目。

---

标题	详情
作者	JosieBook
头衔	CSDN博客专家资格、阿里云社区专家博主、软件设计工程师
博客内容	开源、框架、软件工程、全栈（,NET/Java/Python/C++）、数据库、操作系统、大数据、人工智能、工控、网络、程序人生
口号	成为你自己，做你想做的
欢迎三连	👍点赞、✍评论、⭐收藏