五分钟学会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'
      })
    ]
  },
};