Vue-cli2项目文件目录解析
前言
不是原创，真的不是原创，主要我是根据CSDN的一篇文章和其他平台上的文章整理而来，在最后我会贴上所有原文的地址，下面正式进入正文。
Vue-cli项目文件目录结构
这个是Vue-cli2.0版本的文件目录结构，总体来说就是如下图的
build文件目录
1、build.js文件： 是我们完成项目之后需要运行的， 可以将我们的项目文件打包成 静态文件，存放在项目根目录的 dist 文件夹中（现在目录里还没有这个文件夹，npm run build的时候会自动生成），当然你可以自己设置路径，是在 config 文件夹中的 index.js 中改，可以指定主页，默认是 index.html。
'use strict'
// 调用exports出来的一个函数
require('./check-versions')()
// 全局环境变量的设置（默认生产模式）
process.env.NODE_ENV = 'production'
// ora，一个可以在终端显示spinner的插件，就是日志输出
const ora = require('ora')
// rm，用于删除文件或文件夹的插件
const rm = require('rimraf')
// path，node中默认处理文件路径的模块
const path = require('path')
// chalk，用于在控制台输出带颜色字体的插件
const chalk = require('chalk')
const webpack = require('webpack')
// config，项目配置文件
const config = require('../config')
// 加载生产包的配置
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
// 开启loading动画
spinner.start()
// 首先将整个dist文件夹以及里面的内容删除，以免遗留旧的没用的文件
// 删除完成后才开始webpack构建打包
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if(err) throw err
// 执行webpack构建打包，完成之后在终端输出构建完成的相关信息或者输出报错信息并退出程序
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if(err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
// If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
if(stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(' Tip: built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n'))
})
})
2、check-version.js文件： 主要是检查一些所依赖的工具的版本是否适用，如nodejs、npm，若版本太低则会提示出来。
'use strict'
// chalk，用于在控制台输出带颜色字体的插件
const chalk = require('chalk')
// 引入版本检查工具
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec(cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}]
if(shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function() {
const warnings = []
for(let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
// 检查版本是否合法
if(!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' + chalk.red(mod.currentVersion) + ' should be ' + chalk.green(mod.versionRequirement))
}
}
if(warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for(let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
3、utils.js文件： 一个功能模块，以便于解析各种格式的css，如 less，sass 什么的。
'use strict'
const path = require('path')
const config = require('../config')
// 这里用来提取css样式
// extract-text-webpack-plugin可以提取bundle中的特定文本，将提取后的文本单独存放到另外的文件
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
// 资源文件的存放路径
exports.assetsPath = function(_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory : config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
// 生成css、sass、scss等各种用来编写样式的语言所对应的loader配置
exports.cssLoaders = function(options) {
options = options || {}
// css-loader配置
const cssLoader = {
loader: 'css-loader',
options: {
// 是否使用source-map
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
// 生成各种loader配置，并且配置了extract-text-pulgin
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 例如generateLoaders('less')，这里就会push一个less-loader
// less-loader先将less编译成css，然后再由css-loader去处理css
// 其他sass、scss等语言也是一样的过程
if(loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if(options.extract) {
// 配置extract-text-plugin提取样式
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
// 无需提取样式则简单使用vue-style-loader配合各种样式loader去处理<style>里面的样式
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
// 得到各种不同处理样式的语言所对应的loader
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
// 生成处理单独的.css、.sass、.scss等样式文件的规则
exports.styleLoaders = function(options) {
const output = []
const loaders = exports.cssLoaders(options)
for(const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return(severity, errors) => {