vuecli2 和 vuecli3

csdn vuecli2 和 vuecli3 区别
2.0 和 3.0 项目结构
vue_cli - 图2
2.0 项目安装 vue init webpack 2.0peojectName
3.0 项目安装 vue create 3.0projectName
2.0 项目启动 npm run dev
3.0 项目启动 npm run serve

vuecli2 版本

vue-cli2.x构建项目及目录详解

安装使用

  1. ## 这种安装vuecli的写法默认安装的是vue-cli2.X
  2. npm i -g vue-cli
  4. ## 需要配合 webpack 使用
  5. npm i webpack webpack-dev-server -g
  7. ## 初始化项目
  8. vue init webpack project_name

项目描述

vue_cli - 图3

目录介绍：

创建成功后的目录结构

vue_cli - 图4

【build 文件夹】

**vue_cli - 图5

1、【build.js】

  1. 'use strict'                                    // js的严格模式
  2. require('./check-versions')()                   // node和npm的版本检查
  4. process.env.NODE_ENV = 'production'             // 设置环境变量为生产环境
  6. // 导进各模块
  7. const ora = require('ora') // loading模块
  8. const rm = require('rimraf') // 用于删除文件
  9. const path = require('path') // 文件路径工具
  10. const chalk = require('chalk') // 在终端输出带颜色的文字
  11. const webpack = require('webpack') // 引入webpack.js
  12. const config = require('../config') // 引入配置文件
  13. const webpackConfig = require('./webpack.prod.conf') // 引入生产环境配置文件
  14. // 在终端显示loading效果, 并输出提示
  15. const spinner = ora('building for production...')
  16. spinner.start()
  18. /*
  19.     rm方法删除dist/static文件夹
  20.         若删除中有错误则抛出异常并终止程序
  21.         若没有错误则继续执行，构建webpack
  22.             结束动画
  23.             若有异常则抛出
  24.             标准输出流，类似于console.log
  25. */
  26. rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  27.   if (err) throw err
  28.   webpack(webpackConfig, (err, stats) => {
  29.     spinner.stop()
  30.     if (err) throw err
  31.     process.stdout.write(stats.toString({
  32.       colors: true,                     // 增加控制台颜色开关
  33.       modules: false,                   // 是否增加内置模块信息
  34.       children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
  35.       chunks: false,                    // 允许较少的输出
  36.       chunkModules: false               // 不将内置模块信息加到包信息
  37.     }) + '\n\n')                        // 编译过程持续打印
  38.     // 编译出错的信息
  39.     if (stats.hasErrors()) {
  40.       console.log(chalk.red('  Build failed with errors.\n'))
  41.       process.exit(1)
  42.     }
  43.     // 编译成功的信息
  44.     console.log(chalk.cyan('  Build complete.\n'))
  45.     console.log(chalk.yellow(
  46.       '  Tip: built files are meant to be served over an HTTP server.\n' +
  47.       '  Opening index.html over file:// won\'t work.\n'
  48.     ))
  49.   })
  50. })

2、【check-versions.js】

node和npm的版本检测, 实现版本依赖

  1. 'use strict'                                            // js的严格模式
  3. // 导进各模块
  4. const chalk = require('chalk')
  5. const semver = require('semver') // 检测版本
  6. const packageConfig = require('../package.json')
  7. const shell = require('shelljs') // shell.js插件，执行unix系统命令
  9. function exec (cmd) {
  10.   // 脚本可以通过child_process模块新建子进程，从而执行Unix系统命令
  11.   // 将cmd参数传递的值转换成前后没有空格的字符串，也就是版本号
  12.   return require('child_process').execSync(cmd).toString().trim()
  13. }
  15. //声明常量数组，数组内容为有关node相关信息的对象
  16. const versionRequirements = [
  17.   {
  18.     name: 'node',                                       //对象名称为node
  19.     currentVersion: semver.clean(process.version),      //使用semver插件，把版本信息转换成规定格式
  20.     versionRequirement: packageConfig.engines.node      //规定package.json中engines选项的node版本信息
  21.   }
  22. ]
  24. if (shell.which('npm')) {                               //which为linux指令，在$path规定的路径下查找符合条件的文件
  25.   versionRequirements.push({
  26.     name: 'npm',
  27.     currentVersion: exec('npm --version'),              //调用npm --version命令，并且把参数返回给exec函数获取纯净版本
  28.     versionRequirement: packageConfig.engines.npm       //规定package.json中engines选项的node版本信息
  29.   })
  30. }
  32. module.exports = function () {
  33.   const warnings = []
  35.   for (let i = 0; i < versionRequirements.length; i++) {
  36.     const mod = versionRequirements[i]
  37.     // 如果版本号不符合package.json文件中指定的版本号，就执行warning.push...
  38.     // 当前版本号用红色标识，要求版本号用绿色标识
  39.     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
  40.       warnings.push(mod.name + ': ' +
  41.         chalk.red(mod.currentVersion) + ' should be ' +
  42.         chalk.green(mod.versionRequirement)
  43.       )
  44.     }
  45.   }
  46.   //如果为真，则打印提示用户升级新版本
  47.   if (warnings.length) {
  48.     console.log('')
  49.     console.log(chalk.yellow('To use this template, you must update following to modules:'))
  50.     console.log()
  52.     for (let i = 0; i < warnings.length; i++) {
  53.       const warning = warnings[i]
  54.       console.log('  ' + warning)
  55.     }
  57.     console.log()
  58.     process.exit(1)
  59.   }
  60. }

3、【utils.js】

utils 是工具的意思，是一个用来处理css的文件，这个文件包含了三个工具函数:

  • 生成静态资源的路径
  • 生成 ExtractTextPlugin对象或loader字符串
  • 生成 style-loader的配置 ```javascript ‘use strict’ const path = require(‘path’) const config = require(‘../config’) // 引入config下的index.js文件 const ExtractTextPlugin = require(‘extract-text-webpack-plugin’) // 一个插件，抽离css样式，防止将样式打包在js中引起样式加载错乱 const packageConfig = require(‘../package.json’) // 导出assetsPath /** @method assertsPath 生成静态资源的路径(判断开发环境和生产环境,为config文件中index.js文件中定义assetsSubDirectory)
    • @param {String} _path 相对于静态资源文件夹的文件路径
    • @return {String} 静态资源完整路径 */ exports.assetsPath = function (_path) { const assetsSubDirectory = process.env.NODE_ENV === ‘production’ ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory //nodeJs path提供用于处理文件路径的工具;path.posix提供对路径方法的POSIX(可移植性操作系统接口)特定实现的访问(可跨平台); path.posix.join与path.join一样，不过总是以 posix 兼容的方式交互 return path.posix.join(assetsSubDirectory, _path) // path.join返回绝对路径（在电脑上的实际位置）；path.posix.join返回相对路径 }

/**

  • @method cssLoaders 生成处理css的loaders配置,使用css-loader和postcssLoader,通过options.usePostCSS属性来判断是否使用postcssLoader中压缩等方法
  • @param {Object} option = {sourceMap: true,// 是否开启 sourceMapextract: true // 是否提取css}生成配置

  • @return {Object} 处理css的loaders配置对象 */ exports.cssLoaders = function (options) { options = options || {}

    const cssLoader = { loader: ‘css-loader’, options: { sourceMap: options.sourceMap } }

    const postcssLoader = { loader: ‘postcss-loader’, options: { sourceMap: options.sourceMap } }

    // generate loader string to be used with extract text plugin /**@method generateLoaders 生成 ExtractTextPlugin对象或loader字符串

    • @param {Array} loaders loader名称数组

    • @return {String|Object} ExtractTextPlugin对象或loader字符串 */ function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

      if (loader) { loaders.push({ loader: loader + ‘-loader’, options: Object.assign({}, loaderOptions, {

      1.  sourceMap: options.sourceMap

      }) }) }

    // ExtractTextPlugin提取css(当上面的loaders未能正确引入时,使用vue-style-loader) if (options.extract) {// 生产环境中，默认为true return ExtractTextPlugin.extract({

    1.  use: loaders,
    2.  fallback: 'vue-style-loader'

    }) } else {//返回vue-style-loader连接loaders的最终值 return [‘vue-style-loader’].concat(loaders) } }

    // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(),//需要css-loader 和 vue-style-loader postcss: generateLoaders(),//需要css-loader、postcssLoader 和 vue-style-loader less: generateLoaders(‘less’),//需要less-loader 和 vue-style-loader sass: generateLoaders(‘sass’, { indentedSyntax: true }),//需要sass-loader 和 vue-style-loader scss: generateLoaders(‘sass’),//需要sass-loader 和 vue-style-loader stylus: generateLoaders(‘stylus’),//需要stylus-loader 和 vue-style-loader styl: generateLoaders(‘stylus’)//需要stylus-loader 和 vue-style-loader } }

/**@method styleLoaders 生成 style-loader的配置

  • @param {Object} options 生成配置

  • @return {Array} style-loader的配置 */ exports.styleLoaders = function (options) { const output = [] const loaders = exports.cssLoaders(options) //将各种css,less,sass等综合在一起得出结果输出output 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) => { if (severity !== ‘error’) return

  1. const error = errors[0]
  2. const filename = error.file && error.file.split('!').pop()
  4. notifier.notify({
  5.   title: packageConfig.name,
  6.   message: severity + ': ' + error.name,
  7.   subtitle: filename || '',
  8.   icon: path.join(__dirname, 'logo.png')
  9. })

} }

  1. <a name="pYWrc"></a>
  2. #### 4、【vue-loader.conf.js】
  3. 处理.vue文件，解析这个文件中的每个语言块（template、script、style)，转换成js可用的js模块
  4. ```javascript
  5. 'use strict'
  6. const utils = require('./utils')
  7. const config = require('../config')
  8. const isProduction = process.env.NODE_ENV === 'production'
  9. //生产环境,提取css样式到单独文件
  10. const sourceMapEnabled = isProduction
  11.  ? config.build.productionSourceMap
  12.  : config.dev.cssSourceMap
  13. module.exports = {
  14.  loaders: utils.cssLoaders({
  15.   sourceMap: sourceMapEnabled,
  16.   extract: isProduction
  17.  }),
  18.  cssSourceMap: sourceMapEnabled,
  19.  cacheBusting: config.dev.cacheBusting,
  20.  //编译时将“引入路径”转换为require调用,使其可由webpack处理
  21.  transformToRequire: {
  22.   video: ['src', 'poster'],
  23.   source: 'src',
  24.   img: 'src',
  25.   image: 'xlink:href'
  26.  }
  27. }

5、【webpack.base.conf.js】

  1. 'use strict'
  2. const path = require('path')// node自带的文件路径工具
  3. const utils = require('./utils')// 工具函数集合
  4. const config = require('../config')// 配置文件
  5. const vueLoaderConfig = require('./vue-loader.conf')// 工具函数集合
  6. /**
  7.  * 获取"绝对路径"
  8.  * @method resolve
  9.  * @param {String} dir 相对于本文件的路径
  10.  * @return {String}   绝对路径
  11.  */
  12. function resolve(dir) {
  13.  return path.join(__dirname, '..', dir)
  14. }
  16. module.exports = {
  17.  context: path.resolve(__dirname, '../'),
  18.  //入口js文件(默认为单页面所以只有app一个入口)
  19.  entry: {
  20.   app: './src/main.js'
  21.  },
  22.  //配置出口
  23.  output: {
  24.   path: config.build.assetsRoot,//打包编译的根路径(dist)
  25.   filename: '[name].js',
  26.   publicPath: process.env.NODE_ENV === 'production'
  27.    ? config.build.assetsPublicPath
  28.    : config.dev.assetsPublicPath//发布路径
  29.  },
  30.  resolve: {
  31.   extensions: ['.js', '.vue', '.json'],// 自动补全的扩展名
  32.   //别名配置
  33.   alias: {
  34.    'vue$': 'vue/dist/vue.esm.js',
  35.    '@': resolve('src'),// eg:"src/components" => "@/components"
  36.   }
  37.  },
  38.  module: {
  39.   rules: [
  40.    //使用vue-loader将vue文件编译转换为js
  41.    {
  42.     test: /\.vue$/,
  43.     loader: 'vue-loader',
  44.     options: vueLoaderConfig
  45.    },
  46.    //通过babel-loader将ES6编译压缩成ES5
  47.    {
  48.     test: /\.js$/,
  49.     loader: 'babel-loader',
  50.     include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
  51.    },
  52.    //使用url-loader处理(图片、音像、字体)，超过10000编译成base64
  53.    {
  54.     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  55.     loader: 'url-loader',
  56.     options: {
  57.      limit: 10000,
  58.      name: utils.assetsPath('img/[name].[hash:7].[ext]')
  59.     }
  60.    },
  61.    {
  62.     test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  63.     loader: 'url-loader',
  64.     options: {
  65.      limit: 10000,
  66.      name: utils.assetsPath('media/[name].[hash:7].[ext]')
  67.     }
  68.    },
  69.    {
  70.     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  71.     loader: 'url-loader',
  72.     options: {
  73.      limit: 10000,
  74.      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  75.     }
  76.    }
  77.   ]
  78.  },
  79.  //nodeJs全局变量/模块，防止webpack注入一些nodeJs的东西到vue中
  80.  node: {
  81.   setImmediate: false,
  82.   dgram: 'empty',
  83.   fs: 'empty',
  84.   net: 'empty',
  85.   tls: 'empty',
  86.   child_process: 'empty'
  87.  }
  88. }

6、【webpack.dev.conf.js】

webpack配置开发环境中的入口

  1. 'use strict'
  2. const utils = require('./utils')
  3. const webpack = require('webpack')
  4. const config = require('../config')
  5. const merge = require('webpack-merge')//webpack-merge实现合并
  6. const path = require('path')
  7. const baseWebpackConfig = require('./webpack.base.conf')
  8. const CopyWebpackPlugin = require('copy-webpack-plugin')
  9. const HtmlWebpackPlugin = require('html-webpack-plugin')
  10. const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')//webpack的提示错误和日志信息的插件
  11. const portfinder = require('portfinder')// 查看空闲端口位置，默认情况下搜索8000这个端口
  13. const HOST = process.env.HOST
  14. const PORT = process.env.PORT && Number(process.env.PORT)
  16. const devWebpackConfig = merge(baseWebpackConfig, {
  17.  module: {
  18.   rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  19.  },
  20.  devtool: config.dev.devtool,//调试模式
  21.  devServer: {
  22.   clientLogLevel: 'warning',
  23.   historyApiFallback: {//使用 HTML5 History API 时， 404 响应替代为 index.html
  24.    rewrites: [
  25.     { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
  26.    ],
  27.   },
  28.   hot: true,//热重载
  29.   contentBase: false, // 提供静态文件访问
  30.   compress: true,//压缩
  31.   host: HOST || config.dev.host,
  32.   port: PORT || config.dev.port,
  33.   open: config.dev.autoOpenBrowser,//npm run dev 时自动打开浏览器
  34.   overlay: config.dev.errorOverlay
  35.    ? { warnings: false, errors: true }
  36.    : false,// 显示warning 和 error 信息
  37.   publicPath: config.dev.assetsPublicPath,
  38.   proxy: config.dev.proxyTable,//api代理
  39.   quiet: true, //控制台打印警告和错误(用FriendlyErrorsPlugin 为 true)
  40.   watchOptions: {// 检测文件改动
  41.    poll: config.dev.poll,
  42.   }
  43.  },
  44.  plugins: [
  45.   new webpack.DefinePlugin({
  46.    'process.env': require('../config/dev.env')
  47.   }),
  48.   new webpack.HotModuleReplacementPlugin(),//模块热替换插件，修改模块时不需要刷新页面
  49.   new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  50.   new webpack.NoEmitOnErrorsPlugin(),//webpack编译错误的时候，中断打包进程，防止错误代码打包到文件中
  51.   // 将打包编译好的代码插入index.html
  52.   new HtmlWebpackPlugin({
  53.    filename: 'index.html',
  54.    template: 'index.html',
  55.    inject: true
  56.   }),
  57.   // 提取static assets 中css 复制到dist/static文件
  58.   new CopyWebpackPlugin([
  59.    {
  60.     from: path.resolve(__dirname, '../static'),
  61.     to: config.dev.assetsSubDirectory,
  62.     ignore: ['.*']//忽略.*的文件
  63.    }
  64.   ])
  65.  ]
  66. })
  68. module.exports = new Promise((resolve, reject) => {
  69.  portfinder.basePort = process.env.PORT || config.dev.port
  70.  portfinder.getPort((err, port) => { //查找端口号
  71.   if (err) {
  72.    reject(err)
  73.   } else {
  74.    //端口被占用时就重新设置evn和devServer的端口
  75.    process.env.PORT = port
  76.    devWebpackConfig.devServer.port = port
  77.    // npm run dev成功的友情提示
  78.    devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
  79.     compilationSuccessInfo: {
  80.      messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
  81.     },
  82.     onErrors: config.dev.notifyOnErrors
  83.     ? utils.createNotifierCallback()
  84.     : undefined
  85.    }))
  86.    resolve(devWebpackConfig)
  87.   }
  88.  })
  89. })

7、【webpack.dev.prod.js】

webpack配置生产环境中的入口

  1. 'use strict'
  2. const path = require('path')
  3. const utils = require('./utils')
  4. const webpack = require('webpack')
  5. const config = require('../config')
  6. const merge = require('webpack-merge')
  7. const baseWebpackConfig = require('./webpack.base.conf')
  8. const CopyWebpackPlugin = require('copy-webpack-plugin')
  9. const HtmlWebpackPlugin = require('html-webpack-plugin')
  10. const ExtractTextPlugin = require('extract-text-webpack-plugin')
  11. const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
  12. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  14. const env = require('../config/prod.env')
  16. const webpackConfig = merge(baseWebpackConfig, {
  17.  module: {
  18.   rules: utils.styleLoaders({
  19.    sourceMap: config.build.productionSourceMap,
  20.    extract: true,
  21.    usePostCSS: true
  22.   })
  23.  },
  24.  devtool: config.build.productionSourceMap ? config.build.devtool : false,//是否开启调试模式
  25.  output: {
  26.   path: config.build.assetsRoot,
  27.   filename: utils.assetsPath('js/[name].[chunkhash].js'),
  28.   chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  29.  },
  30.  plugins: [
  31.   new webpack.DefinePlugin({
  32.    'process.env': env
  33.   }),
  34.   new UglifyJsPlugin({//压缩js
  35.    uglifyOptions: {
  36.     compress: {
  37.      warnings: false
  38.     }
  39.    },
  40.    sourceMap: config.build.productionSourceMap,
  41.    parallel: true
  42.   }),
  43.   new ExtractTextPlugin({//提取静态文件，减少请求
  44.    filename: utils.assetsPath('css/[name].[contenthash].css'),
  45.    allChunks: true,
  46.   }),
  47.   new OptimizeCSSPlugin({//提取优化压缩后(删除来自不同组件的冗余代码)的css
  48.    cssProcessorOptions: config.build.productionSourceMap
  49.     ? { safe: true, map: { inline: false } }
  50.     : { safe: true }
  51.   }),
  52.   new HtmlWebpackPlugin({ //html打包压缩到index.html
  53.    filename: config.build.index,
  54.    template: 'index.html',
  55.    inject: true,
  56.    minify: {
  57.     removeComments: true,//删除注释
  58.     collapseWhitespace: true,//删除空格
  59.     removeAttributeQuotes: true//删除属性的引号
  60.    },
  61.    chunksSortMode: 'dependency'//模块排序，按照我们需要的顺序排序
  62.   }),
  64.   new webpack.HashedModuleIdsPlugin(),
  65.   new webpack.optimize.ModuleConcatenationPlugin(),
  66.   new webpack.optimize.CommonsChunkPlugin({  // node_modules中的任何所需模块都提取到vendor
  67.    name: 'vendor',
  68.    minChunks (module) {
  69.     return (
  70.      module.resource &&
  71.      /\.js$/.test(module.resource) &&
  72.      module.resource.indexOf(
  73.       path.join(__dirname, '../node_modules')
  74.      ) === 0
  75.     )
  76.    }
  77.   }),
  78.   new webpack.optimize.CommonsChunkPlugin({
  79.    name: 'manifest',
  80.    minChunks: Infinity
  81.   }),
  82.   new webpack.optimize.CommonsChunkPlugin({
  83.    name: 'app',
  84.    async: 'vendor-async',
  85.    children: true,
  86.    minChunks: 3
  87.   }),
  88.   new CopyWebpackPlugin([//复制static中的静态资源（默认到dist里面）
  89.    {
  90.     from: path.resolve(__dirname, '../static'),
  91.     to: config.build.assetsSubDirectory,
  92.     ignore: ['.*']
  93.    }
  94.   ])
  95.  ]
  96. })
  98. if (config.build.productionGzip) {
  99.  const CompressionWebpackPlugin = require('compression-webpack-plugin')
  101.  webpackConfig.plugins.push(
  102.   new CompressionWebpackPlugin({
  103.    asset: '[path].gz[query]',
  104.    algorithm: 'gzip',
  105.    test: new RegExp(
  106.     '\\.(' +
  107.     config.build.productionGzipExtensions.join('|') +
  108.     ')$'
  109.    ),
  110.    threshold: 10240,
  111.    minRatio: 0.8
  112.   })
  113.  )
  114. }
  116. if (config.build.bundleAnalyzerReport) {
  117.  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  118.  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  119. }
  121. module.exports = webpackConfig

【config文件夹】

vue_cli - 图6

1、【dev.env.js和prod.env.js】

分别配置：开发环境和生产环境。这个可以根据公司业务结合后端需求配置需要区分开发环境和测试环境的属性

  1. 'use strict'
  2. // webpack-merge用于实现合并类似于ES6的Object.assign()
  3. const merge = require('webpack-merge')
  4. const prodEnv = require('./prod.env')
  6. module.exports = merge(prodEnv, {
  7.  NODE_ENV: '"development"'
  8. })
  1. 'use strict'
  2. module.exports = {
  3.  NODE_ENV: '"production"'
  4. }

注意属性值要用”‘’”双层引住，访问（获取值）时直接用：process.env.属性名 process（进程）是nodejs的一个全局变量，process.env 属性返回一个用户环境信息的对象。

2、【index.js】

  1. 'use strict';
  2. const path = require('path');
  4. module.exports = {
  6.  // ===================开发环境配置
  8.  dev: {
  9.   assetsSubDirectory: 'static',//静态资源文件夹(一般存放css、js、image等文件)
  10.   assetsPublicPath: '/',//根目录
  11.   proxyTable: {},//配置API代理，可利用该属性解决跨域的问题
  12.   host: 'localhost', // 可以被 process.env.HOST 覆盖
  13.   port: 3030, // 可以被 process.env.PORT 覆盖
  14.   autoOpenBrowser: true,//编译后自动打开浏览器页面 http://localhost:3030/("port + host",默认"false"),设置路由重定向自动打开您的默认页面
  15.   errorOverlay: true,//浏览器错误提示
  16.   notifyOnErrors: true,//跨平台错误提示
  17.   poll: false, //webpack提供的使用文件系统(file system)获取文件改动的通知devServer.watchOptions(监控文件改动)
  18.   devtool: 'cheap-module-eval-source-map',//webpack提供的用来调试的模式，有多个不同值代表不同的调试模式
  19.   cacheBusting: true,// 配合devtool的配置，当给文件名插入新的hash导致清除缓存时是否生成source-map
  20.   cssSourceMap: true //记录代码压缩前的位置信息,当产生错误时直接定位到未压缩前的位置,方便调试
  21.  },
  23. // ========================生产环境配置
  25.  build: {
  26.   index: path.resolve(__dirname, '../dist/index.html'),//编译后"首页面"生成的绝对路径和名字
  27.   assetsRoot: path.resolve(__dirname, '../dist'),//打包编译的根路径(默认dist，存放打包压缩后的代码)
  28.   assetsSubDirectory: 'static',//静态资源文件夹(一般存放css、js、image等文件)
  29.   assetsPublicPath: '/',//发布的根目录(dist文件夹所在路径)
  30.   productionSourceMap: true,//是否开启source-map
  31.   devtool: '#source-map',//(详细参见：https://webpack.docschina.org/configuration/devtool)
  32.   productionGzip: false,//是否压缩
  33.   productionGzipExtensions: ['js', 'css'],//unit的gzip命令用来压缩文件（gzip模式下需要压缩的文件的扩展名有js和css）
  34.   bundleAnalyzerReport: process.env.npm_config_report //是否开启打包后的分析报告
  35.  }
  36. };

【assets 文件夹】

用于存放静态资源（css、image等），assets 打包是路径会经过webpack中的 file-loader 编译成 js。（所以，assets 需要使用绝对路径）

【static 文件夹】

默认存放静态资源（css、image等）的文件夹，与 assets 不同的是：static 在打包的时候会直接复制到一个同名的文件夹到 dist 文件夹里。（不会经过编译，可使用相对路径）

【其他文件】

（1）.babelrc：

浏览器解析的兼容配置，该文件主要是对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项，大致可分为：语法转义器、补丁转义器、sx和flow插件

（2）.editorconfig：

用于配置代码格式（配合代码检查工具使用，如：ESLint，团队开发时可统一代码风格），这里配置的代码规范规则优先级高于编辑器默认的代码格式化规则 。

（3）.gitignore：

配置git提交时需要忽略的文件

（4）postcssrc.js：

autoprefixer（自动补全css样式的浏览器前缀）；postcss-import（@import引入语法）、CSS Modules（规定样式作用域）

（5）index.html：

项目入口页面，编译之后所有代码将插入到这来

（6）package.json：

npm的配置文件（npm install根据package.json下载对应版本的安装包）

（7）package.lock.json：

npm install（安装）时锁定各包的版本号

（8）README.md：

项目使用说明

vuecli3 安装

全局安装：

  1. npm install -g @vue/cli

使用3.0版本 创建 2.0 版本的项目

安装了3.0版本还想使用2.0版本创建项目 无需卸载3.0版本。直接安装
npm i -g @vue/cli-init
就可以创建cli2的项目了。
Vue2构建项目实战
Vue2项目的建立和目录的简单介绍

查看版本：

  1. vue --version

创建项目：

vue create 命令

  1. vue create [options] <app-name>

or 使用图形化界面

  1. vue ui

目录结构

vue_cli - 图7

【public】

相当于 cli2 版本的 static 文件夹
资源会原封不动的 复制到 dist 文件夹下

【assets】

静态资源，会经过 webpack 打包过程
【babel.config.js】
转移ES6高级语法，相当于之前的 .babelrc 文件

配置

通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置。
通过 在项目根目录新建 vue.config.js文件 修改 webpack 的默认配置。

  1. module.exports = {
  2.   //  baseUrl  从 Vue CLI 3.3 起已弃用，请使用publicPath
  3.   baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
  4.   // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
  5.   // outputDir: 'dist',
  6.   // pages:{ type:Object,Default:undfind }
  7.   devServer: {
  8.     port: 8888, // 端口号
  9.     host: 'localhost',
  10.     https: false, // https:{type:Boolean}
  11.     open: true, //配置自动启动浏览器
  12.     // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
  13.     proxy: {
  14.       '/api': {
  15.         target: '<url>',
  16.         ws: true,
  17.         changeOrigin: true,
  18.       },
  19.       '/foo': {
  20.         target: '<other_url>',
  21.       },
  22.     }, // 配置多个代理
  23.   },
  24. }

cli3.0 配置

别名配置
  1. // vue.config.js
  2. const path = require('path')
  3. function resolve(dir){
  4.     return path.join(__dirname, dir)
  5. }
  6. module.export = {
  7.     chainWebpack: config => {
  8.         config.resolve.alias
  9.         // 配置别名
  10.             .set('@', resolve('src'))
  11.     }
  12. }

cli4.0 配置

使用vue-cli4.0快速搭建一个项目

vant 在不同版本下的配置

创建vue-cli2项目与vue-cli3项目的差别