五分钟学会vue-cli3配置

前言

该文献给想简单了解vue-cli3的vue.config.js和一些webpack的经常使用配置，一些不经常使用或者通常采用默认设置的在这里也就先略过了，咱们的宗旨是五分钟入门

说明

- 下面我所说的资源指的是js、css、image文件
- vue.config.js是vue-cli的webpack配置，若是没有该文件请在项目目录建立

vue-cli配置

outputDir

默认值 - dist
描述 - 打包后项目文件夹名称，咱们尝试改为testdist结果以下

publicPath

默认值 - '/'
描述 - 打包后项目引用资源的路径，咱们尝试改为/test结果以下，咱们能够看到全部引用资源的路径在最前面都加上/test

assetsDir与indexPath

默认值 - '/'
描述 - assetsDir是指定打包后资源存放的位置，indexPath则是index.html存放位置，咱们尝试改一下这两个参数，结果以下，和上一张图testdist文件夹下的结构对比相信你们也知道这两个属性的做用的吧

filenameHashing

默认 - true
描述 - 打包后资源文件是否加上哈希值，true加上哈希值，false不加哈希值，改为false后以下，和图2对比文件名确实没有了哈希值了，不过这里我仍是建议该项设为true的，由于浏览器会缓存资源，该属性设为true每次打包的哈希值都不同，能够很好地避免版本迭代缓存带来的很差影响

pages

描述 - 该项配置说白了就是对打包后如何生成index.html的配置，该配置项下的配置以下

const pageOptions = { // html模版变量，pages.index里的全部变量均可在htmlWebpackPlugin.options下得到
  title: 'vueTest', // template 中的 title 标签须要是 <title><%= htmlWebpackPlugin.options.title %></title>
}
module.exports = {
  pages: {
    index: {
      entry: 'src/main.js', // 项目入口文件
      template: './public/index.html', // 项目模板
      filename: `${buildRootPath}index.html`,  // 打包后生产的html文件名
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
      ...pageOptions,
      // 在这个页面中包含的块，默认状况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },
};
复制代码

lintOnSave

描述 - 使用 eslint-loader校验语法，若是值为'error'要就不符合就报错，true则是警告但不报错

css

说明
- sass、less、stylus为css的扩展语言，我的比较推荐sass
- postcss为css转换工具
描述 - 设置css的预处理器配置项，该配置项有4个属性requireModuleExtension、extract、sourceMap、loaderOptions，vue-cli已经帮你处理好requireModuleExtension、extract、sourceMap的优化了不须要去管，loaderOptions是CSS相关的loader传递配置项的属性，css-loader、postcss-loader、sass-loader、less-loader、stylus-loader，这些loader的语法都不同有问题查文档便可，我举些平时可能用到的功能做为🌰

module.exports = {
  css: { // 样式配置
    loaderOptions: { // 与CSS相关的loader配置都在这里
      postcss: {  // postcss配置例子
        plugins: [  //  添加插件
          require('postcss-pxtorem')({ // px转换为rem 须要npm i postcss-pxtorem -D
            rootValue: 100, // 换算的基数
            selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            propList: ['*'],
          }),
        ]
      },
      sass: {  // sass配置例子
        data: `
        @import "@/sass/theme-variables.scss";
        @import "@/sass/init.scss";
        @import "@/sass/tool.scss";
        `
        // 倒入多个scss文件
      },
      less: {  // less配置例子
        globalVars: {  // 设置全局变量，设置完后background: @primary;便可
          primary: '#f38'
        }
      }
    }
  },
};
复制代码

devServer

描述 - 该配置项设置vue开发环境的server，基本配置以下

module.exports = {
  devServer: {  // 和webpack的devServer配置如出一辙
    https: false,  // ture启用https，false启用http
    host: '0.0.0.0',
    port: 8001,
  },
}
复制代码

configureWebpack

描述 - 说实话这个配置项真的颇有用，在这里你能使用webpack的配置，最后与vue-cli的其余配置合并，若是有配置冲突vue-cli的其余配置会把configureWebpack的配置覆盖，例子以下，复制粘贴到你的vue.config.js便可感觉下，有了这个你就能任意扩展你的webpack配置

module.exports = {
  configureWebpack: {  // Webpack原生配置项，该对象会经过webpack-merge合并到最终的配置中，若有冲突configureWebpack被vue-cli其余覆盖
      devServer: {
        https: false,  // ture启用https，false启用http
        host: '0.0.0.0',
        port: 8001,
     },
  },
};
复制代码

chainWebpack

描述 - 与configureWebpack的功能同样，该配置是一种链式的操做在这里略过

webpack经常使用配置配置

entry - 入口的处理
output - 输出文件的处理
devServer 开发server
module - 配置 Loader
resolve - 用于处理引入module的配置
plugins - 引入webpack的插件

前面讲过几个基本配置，除了configureWebpack其余都是vue-cli对entry、output、devServer、module的css部分进行的封装，configureWebpack主要用与resolve、plugins、module的css之外的部分

resolve.extensions

描述 - 导入文件若是不加后缀名，设置该属性自动补上，顺序是从左到右

module.exports = {
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json'],  // 导入文件若是不加后缀名，设置该属性自动补上，顺序是从左到右
    },
  },
};
复制代码

resolve.alias

描述 - 目录路径的别名，配置以下

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.min.js',
        '@': resolve('src'),  // @直接表明src目录，
        // 例子：import TodosMenu from '@/pages/TodosMenu.vue';
        'pages': resolve('src/pages'),  // @直接表明src目录下的pages目录，
        // 例子：import TodosMenu from 'pages/TodosMenu.vue';
      },
    },
  },
};

复制代码

plugins

描述 - 用于引入第三方的webpack插件，若是须要对项目进行优化能够从该配置项入手，webpack官方自己提供了许多插件

推荐插件

webpack.ProvidePlugin
描述 - 全局引入第三方库

module.exports = {
  configureWebpack: {  // Webpack原生配置项，该对象会经过webpack-merge合并到最终的配置中，若有冲突configureWebpack被vue-cli其余覆盖
    plugins: [  // 引入webpack插件
      new webpack.ProvidePlugin({
        //  webpack自动帮你加上import _ from 'lodash',记得在.eslintrc.js的globals里加上_属性为true，globals: { _: true, }
        _: 'lodash'
      })
    ]
  },
};
复制代码

最后给出一份上面暗🌰的配置

const path = require('path');
const webpack = require('webpack');

const resolve = dir => path.join(__dirname, dir);

const buildRootPath = './'

const buildConfig = { // 打包配置
  // outputDir: './dist', // 打包后项目存放位置
  publicPath: '/', // 打包后的引用资源路径(css、js)
  assetsDir: `${buildRootPath}`, // 打包后资源(css、js、img等)存放目录
  indexPath: `${buildRootPath}index.html`, // 指定生成的 index.html 的输出路径 
  filenameHashing: false, // 打包后资源文件名自动加上哈希值 true\false
}

const pageOptions = { // html模版变量
  title: 'vueTest', // template 中的 title 标签须要是 <title><%= htmlWebpackPlugin.options.title %></title>
}

module.exports = {
  ...buildConfig,
  pages: {
    index: {
      entry: 'src/main.js', // 项目入口文件
      template: './public/index.html', // 项目模板
      filename: `${buildRootPath}index.html`,  // 打包后生产的html文件名
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
      ...pageOptions,
      // 在这个页面中包含的块，默认状况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },
  lintOnSave: true, // 校验eslint语法,若是值为'error'要就不符合就报错
  devServer: {  // 和webpack的devServer配置如出一辙
    https: false,  // ture启用https，false启用http
    host: '0.0.0.0',
    port: 8001,
  },
  css: { // 样式配置
    loaderOptions: { // CSS相关的loader配置
      postcss: {
        plugins: [  // 添加插件
          require('postcss-pxtorem')({ // px转换为rem 须要npm i postcss-pxtorem -D
            rootValue: 100, // 换算的基数
            selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            propList: ['*'],
          }),
        ]
      }
      // less: {  // less配置例子
      //   globalVars: {  // 设置全局变量，设置完后background: @primary;便可
      //     primary: '#f38'
      //   }
      // }
    }
  },
  configureWebpack: {  // Webpack原生配置项，该对象会经过webpack-merge合并到最终的配置中，若有冲突configureWebpack被vue-cli其余覆盖
    resolve: {
      extensions: ['.js', '.vue', '.json'],  // 导入文件若是不加后缀名，设置该属性自动补上，顺序是从左到右
      alias: {
        'vue$': 'vue/dist/vue.min.js',
        '@': resolve('src'),  // @直接表明src目录，
        // 例子：import TodosMenu from '@/pages/TodosMenu.vue';
        'pages': resolve('src/pages'),  // @直接表明src目录下的pages目录，
        // 例子：import TodosMenu from 'pages/TodosMenu.vue';
      },
    },
    plugins: [  // 引入webpack插件
      new webpack.ProvidePlugin({
        //  webpack自动帮你加上import _ from 'lodash',记得在.eslintrc.js的globals里加上_属性为true，globals: { _: true, }
        _: 'lodash'
      })
    ]
  },
};
复制代码