vue-cli 目录结构详细讲解总结

一个vue-cli的项目结构如下:

目录

结构预览

├─build         // 保存一些webpack的初始化配置,项目构建│ ├─build.js      // 生产环境构建│ ├─check-version.js  // 检查npm、node版本│ ├─vue-loader.conf.js // webpack loader配置│ ├─webpack.base.conf.js// webpack基础配置│ ├─webpack.dev.conf.js // 开发环境配置，构建本地开发服务器│ ├─webpack.prod.conf.js// 生产环境的配置│├─config        // config文件夹保存一些项目初始化的配置│ ├─dev.env.js     // 开发环境的配置│ ├─index.js      // 项目一些配置变量│ ├─prod.env.js     // 生产环境的配置│├─dist         // 打包后的项目├─node_modules     // 依赖包│├─src          // 源码目录│ ├─assets       // 静态文件目录│ ├─components     // 组件文件│ ├─router       // 路由│ ├─App.vue       // 是项目入口文件│ ├─main.js       // 是项目的核心文件，入口├─static        // 静态资源目录 ├─.babelrc       // Babel的配置文件├─.editorconfig     // 代码规范配置文件├─.gitignore      // git忽略配置文件├─.postcssrc.js     // postcss插件配置文件├─index.html      // 页面入口文件├─package-lock.json   // 项目包管控文件├─package.json     // 项目配置└─README.md       // 项目说明书

结构解析

build

dev-server.js

首先来看执行”npm run dev”时候最先执行的build/dev-server.js文件。该文件主要完成下面几件事情：

说明： express服务器提供静态文件服务，不过它还使用了http-proxy-middleware，一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。

// 检查NodeJS和npm的版本require('./check-versions')()// 获取基本配置var config = require('../config')// 如果Node的环境变量中没有设置当前的环境（NODE_ENV），则使用config中的dev环境配置作为当前的环境if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)}// opn是一个可以调用默认软件打开网址、图片、文件等内容的插件// 这里用它来调用默认浏览器打开dev-server监听的端口，例如：localhost:8080var opn = require('opn')var path = require('path')var express = require('express')var webpack = require('webpack')// http-proxy-middleware是一个express中间件，用于将http请求代理到其他服务器// 例：localhost:8080/api/xxx --> localhost:3000/api/xxx// 这里使用该插件可以将前端开发中涉及到的请求代理到提供服务的后台服务器上，方便与服务器对接var proxyMiddleware = require('http-proxy-middleware')// 开发环境下的webpack配置var webpackConfig = require('./webpack.dev.conf')// dev-server 监听的端口，如果没有在命令行传入端口号，则使用config.dev.port设置的端口，例如8080var port = process.env.PORT || config.dev.port// 用于判断是否要自动打开浏览器的布尔变量，当配置文件中没有设置自动打开浏览器的时候其值为 falsevar autoOpenBrowser = !!config.dev.autoOpenBrowser// HTTP代理表，指定规则，将某些API请求代理到相应的服务器var proxyTable = config.dev.proxyTable// 创建express服务器var app = express()// webpack根据配置开始编译打包源码并返回compiler对象var compiler = webpack(webpackConfig)// webpack-dev-middleware将webpack编译打包后得到的产品文件存放在内存中而没有写进磁盘// 将这个中间件挂到express上使用之后即可提供这些编译后的产品文件服务var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, // 设置访问路径为webpack配置中的output里面所对应的路径 quiet: true // 设置为true，使其不要在控制台输出日志})// webpack-hot-middleware，用于实现热重载功能的中间件var hotMiddleware = require('webpack-hot-middleware')(compiler, { log: false, // 关闭控制台的日志输出 heartbeat: 2000 // 发送心跳包的频率})// webpack(重新)编译打包完成后并将js、css等文件inject到html文件之后，通过热重载中间件强制页面刷新compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {  hotMiddleware.publish({ action: 'reload' })  cb() })})// 根据 proxyTable 中的代理请求配置来设置express服务器的http代理规则Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] // 格式化options，例如将'www.example.com'变成{ target: 'www.example.com' } if (typeof options === 'string') {  options = { target: options } } app.use(proxyMiddleware(options.filter || context, options))})// handle fallback for HTML5 history API// 重定向不存在的URL，用于支持SPA（单页应用）// 例如使用vue-router并开启了history模式app.use(require('connect-history-api-fallback')())// serve webpack bundle output// 挂载webpack-dev-middleware中间件，提供webpack编译打包后的产品文件服务app.use(devMiddleware)// enable hot-reload and state-preserving// compilation error display// 挂载热重载中间件app.use(hotMiddleware)// serve pure static assets// 提供static文件夹上的静态文件服务var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)app.use(staticPath, express.static('./static'))// 访问链接var uri = 'http://localhost:' + port// 创建promise，在应用服务启动之后resolve// 便于外部文件require了这个dev-server之后的代码编写var _resolvevar readyPromise = new Promise(resolve => { _resolve = resolve})console.log('> Starting dev server...')// webpack-dev-middleware等待webpack完成所有编译打包之后输出提示语到控制台，表明服务正式启动// 服务正式启动才自动打开浏览器进入页面devMiddleware.waitUntilValid(() => { console.log('> Listening at ' + uri + '/n') // when env is testing, don't need open it if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {  opn(uri) } _resolve()})// 启动express服务器并监听相应的端口var server = app.listen(port)// 暴露本模块的功能给外部使用，例如下面这种用法// var devServer = require('./build/dev-server')// devServer.ready.then(() => {...})// if (...) { devServer.close() }module.exports = { ready: readyPromise, close: () => {  server.close() }}