目录
[6..editorconfig - 编辑器配置](#6..editorconfig - 编辑器配置)
[7..env.* - 环境变量配置(重要)](#7..env.* - 环境变量配置(重要))
[8..eslintignore & .eslintrc.js - 代码规范](#8..eslintignore & .eslintrc.js - 代码规范)
[9. .gitignore - Git忽略文件](#9. .gitignore - Git忽略文件)
[10. babel.config.js - Babel配置](#10. babel.config.js - Babel配置)
[11. package.json - 项目配置文件(重要)](#11. package.json - 项目配置文件(重要))
[12. package-lock.json - 依赖锁定文件](#12. package-lock.json - 依赖锁定文件)
[13. README.md - 项目说明文档](#13. README.md - 项目说明文档)
[14. vue.config.js - Vue配置(重要)](#14. vue.config.js - Vue配置(重要))
项目结构如图：
1.bin目录
这里可以存放一些自定义脚本
2.build目录
index.js是预览构建结果的服务器文件,内容如下：
运行npm run build:prod时，会产生/dist目录（生产环境打包结果），然后运行npm run preview会执行 build/index.js，启动一个本地服务器来预览 dist/ 目录中的内容
javascript
const { run } = require('runjs')
const chalk = require('chalk')
const config = require('../vue.config.js')
const rawArgv = process.argv.slice(2)
const args = rawArgv.join(' ')
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
const report = rawArgv.includes('--report')
run(`vue-cli-service build ${args}`)
const port = 9526
const publicPath = config.publicPath
var connect = require('connect')
var serveStatic = require('serve-static')
const app = connect()
app.use(
publicPath,
serveStatic('./dist', {
index: ['index.html', '/']
})
)
app.listen(port, function () {
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
if (report) {
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
}
})
} else {
run(`vue-cli-service build ${args}`)
}
3.node_moudles(重要)
这是依赖包目录，和Maven当中的依赖仓库类似
所有通过 npm install 安装的依赖包
不要手动修改，会被 .gitignore 排除
4.public静态资源目录
存放不会被Webpack处理的静态文件
index.html是vue应用的入口Html
5.src源代码目录(重要)
javascript
src/
├── main.js // 应用程序入口文件 - 初始化Vue实例和全局配置
├── App.vue // 根组件 - 应用的主容器组件
├── api/ // API接口层 - 统一管理所有HTTP请求
├── assets/ // 静态资源 - 图片、字体、样式等资源文件
├── components/ // 公共组件库 - 可复用的UI组件和业务组件
├── layout/ // 布局组件 - 页面整体布局结构
├── router/ // 路由配置 - 前端路由管理和权限控制
├── store/ // 状态管理 - Vuex全局状态管理
├── utils/ // 工具函数 - 通用工具类和辅助函数
├── views/ // 页面视图 - 路由对应的页面级组件
├── styles/ // 全局样式 - 样式变量、混合、主题配置
├── directives/ // 自定义指令 - Vue指令扩展
├── filters/ // 过滤器 - 全局数据格式化
├── constants/ // 常量定义 - 项目常量配置
└── hooks/ // 自定义Hooks - Composition API复用逻辑主要的开发目录，大部分代码都在这里
6..editorconfig - 编辑器配置
统一团队代码风格（缩进、换行符等）
需要编辑器插件支持
7..env.* - 环境变量配置(重要)
.env.development - 开发环境配置
.env.production - 生产环境配置
.env.staging - 预发布环境配置
包含API地址、密钥等环境相关配置
8..eslintignore & .eslintrc.js - 代码规范
.eslintrc.js - ESLint规则配置
.eslintignore - 忽略检查的文件/目录
用于代码质量检查和自动格式化
9. .gitignore - Git忽略文件
指定哪些文件不提交到Git仓库
如：node_modules/, dist/, .env.local 等
10. babel.config.js - Babel配置
JavaScript转译器配置
将ES6+语法转换为浏览器兼容的代码
11. package.json - 项目配置文件(重要)
项目名称、版本、描述
依赖包列表（dependencies & devDependencies）
运行脚本（scripts）
类似Maven的Pom.xml文件
12. package-lock.json - 依赖锁定文件
锁定依赖包的精确版本
确保不同环境安装相同版本的包
不要手动修改
13. README.md - 项目说明文档
项目介绍、安装步骤、使用说明等
14. vue.config.js - Vue配置(重要)
javascript
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
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,
// 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: `http://localhost:8282`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// set svg-sprite-loader
config.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 package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single'),
{
from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
to: './' //到根目录下
}
}
)
}
}