五分鐘學會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'
      })
    ]
  },
};
複製代碼