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

// chalk, 用于在控制台输出带颜色字体的插件
var chalk = require('chalk')
// semver, 语义化版本检查插件（The semantic version parser used by npm）
var semver = require('semver')
var packageConfig = require('../package.json')
// shelljs, 执行Unix命令行的插件
var shell = require('shelljs')
// 开辟子进程执行指令cmd并返回结果
function exec (cmd) {
 return require('child_process').execSync(cmd).toString().trim()
}

// node和npm版本需求
var 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 () {
 var warnings = []
 // 依次判断版本是否符合要求
 for (var i = 0; i < versionRequirements.length; i++) {
  var 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 (var i = 0; i < warnings.length; i++) {
   var warning = warnings[i]
   console.log(' ' + warning)
  }
  console.log()
  process.exit(1)
 }
}

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
 // 构建产品时使用的配置
 build: {
  // 环境变量
  env: require('./prod.env'),
  // html入口文件
  index: path.resolve(__dirname, '../dist/index.html'),
  // 产品文件的存放路径
  assetsRoot: path.resolve(__dirname, '../dist'),
  // 二级目录，存放静态资源文件的目录，位于dist文件夹下
  assetsSubDirectory: 'static',
  // 发布路径，如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器，可以在这里进行设置
  // 设置之后构建的产品文件在注入到index.html中的时候就会带上这里的发布路径
  assetsPublicPath: '/',
  // 是否使用source-map
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  // 是否开启gzip压缩
  productionGzip: false,
  // gzip模式下需要压缩的文件的扩展名，设置js、css之后就只会对js和css文件进行压缩
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  // 是否展示webpack构建打包之后的分析报告
  bundleAnalyzerReport: process.env.npm_config_report
 },
 // 开发过程中使用的配置
 dev: {
  // 环境变量
  env: require('./dev.env'),
  // dev-server监听的端口
  port: 8080,
  // 是否自动打开浏览器
  autoOpenBrowser: true,
  // 静态资源文件夹
  assetsSubDirectory: 'static',
  // 发布路径
  assetsPublicPath: '/',
  // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
  // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
  proxyTable: {},
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  // 是否开启 cssSourceMap
  cssSourceMap: false
 }
}
'use strict'
const path = require('path')

module.exports = {
 dev: {
  // 开发环境下面的配置
  assetsSubDirectory: 'static',//子目录，一般存放css,js,image等文件
  assetsPublicPath: '/',//根目录
  proxyTable: {},//可利用该属性解决跨域的问题
  host: 'localhost', // 地址
  port: 8080, //端口号设置，端口号占用出现问题可在此处修改
  autoOpenBrowser: false,//是否在编译（输入命令行npm run dev）后打开http://localhost:8080/页面，以前配置为true，近些版本改为false，个人偏向习惯自动打开页面
  errorOverlay: true,//浏览器错误提示
  notifyOnErrors: true,//跨平台错误提示
  poll: false, //使用文件系统(file system)获取文件改动的通知devServer.watchOptions
  devtool: 'cheap-module-eval-source-map',//增加调试，该属性为原始源代码（仅限行）不可在生产环境中使用
  cacheBusting: true,//使缓存失效
  cssSourceMap: true//代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录，当产生错误时直接定位到未压缩前的位置，将大大的方便我们调试
 },

 build: {
 // 生产环境下面的配置
  index: path.resolve(__dirname, '../dist/index.html'),//index编译后生成的位置和名字，根据需要改变后缀，比如index.php
  assetsRoot: path.resolve(__dirname, '../dist'),//编译后存放生成环境代码的位置
  assetsSubDirectory: 'static',//js,css,images存放文件夹名
  assetsPublicPath: '/',//发布的根目录，通常本地打包dist后打开文件会报错，此处修改为./。如果是上线的文件，可根据文件存放位置进行更改路径
  productionSourceMap: true,
  devtool: '#source-map',//①
  //unit的gzip命令用来压缩文件，gzip模式下需要压缩的文件的扩展名有js和css
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  bundleAnalyzerReport: process.env.npm_config_report
 }
}