vue-cli 2脚手架目录解析

.gitignore文件配置解析

# 当root=true时对下面的文件进行解析
root = true
# 对代码的风格进行统一
[*]
# 使用的编码格式
charset = utf-8
# 缩进的风格 为 空格
indent_style = space
# 缩进的大小为2个空格
indent_size = 2
# 在最后一行换行 根据lf进行换行
end_of_line = lf
# 在最后一行代码加一个换行
insert_final_newline = true
# 删除一些无用的空格
trim_trailing_whitespace = true

.babelrc文件解析

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
          // 需要适配的浏览器，市场份额大于1%的浏览器并且最后的2个版本需要 ie版本小于8就不考虑
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
      // stage 阶段 babel-preset-stage-2
    "stage-2"
  ],
      // 依赖的插件
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

package.json文件解析

{
    // 项目名称
  "name": "vue-admin-template",
    // 版本信息  
  "version": "4.2.1",
  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
  	// 作者
  "author": "Pan <panfree23@gmail.com>",
  // 如果是开源的需要写这个
   "license": "MIT",
      // 这是script映射指令
  "scripts": {
  	  // 当我们使用 npm run dev 会映射执行 vue-cli-service serve
    "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",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },
      // 运行时依赖
  "dependencies": {
    "axios": "^0.18.1",
    "element-ui": "2.12.0",
    "js-cookie": "2.2.0",
    "js-md5": "^0.7.3",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "vcolorpicker": "^0.1.8",
    "vue": "2.6.10",
    "vue-axios": "^3.2.4",
    "vue-router": "3.0.6",
    "vuex": "3.1.0"
  },
      // 开发时依赖
  "devDependencies": {
    "@babel/core": "7.0.0",
    "@babel/register": "7.0.0",
    "@vue/cli-plugin-babel": "3.6.0",
    "@vue/cli-plugin-eslint": "^3.9.1",
    "@vue/cli-plugin-unit-jest": "3.6.3",
    "@vue/cli-service": "3.6.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "autoprefixer": "^9.5.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "chalk": "2.4.2",
    "connect": "3.6.6",
    "eslint": "5.15.3",
    "eslint-plugin-vue": "5.2.2",
    "html-webpack-plugin": "3.2.0",
    "mockjs": "1.0.1-beta3",
    "node-sass": "^4.9.0",
    "runjs": "^4.3.2",
    "sass-loader": "^7.1.0",
    "script-ext-html-webpack-plugin": "2.1.3",
    "script-loader": "0.7.2",
    "serve-static": "^1.13.2",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.2",
    "vue-template-compiler": "2.6.10"
  },
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

vue-config文件解析

'use strict'
// 引用node中的path
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'vue Admin Template' // page title

// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  // 设置所有url的路径都会默认太前面添加一个 /XXX 或者 XXX
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 代理所有以 /admin开头的网络请求
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      '/admin': {
        target: `http://localhost:8886/`, // 后台服务地址
        changeOrigin: true,
        pathRewrite: {
        }
      }
    }
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    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/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
    // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    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')
        }
      )
  }
}