# vue-cli-configuration

**Repository Path**: guokaiGit/vue-cli-configuration

## Basic Information

- **Project Name**: vue-cli-configuration
- **Description**: vue-cli3+ 配置研究学习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-04
- **Last Updated**: 2021-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-cli-configuration


#### 环境配置
  * 运行代码
  ````javascript
  "scripts": {
    "serve": "vue-cli-service serve --open --watch",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service serve --open --watch --mode development",
    "prod": "vue-cli-service serve --open --watch --mode production",
    "crm": "vue-cli-service serve --open --watch --mode crm"
  },
  ````
  * 配置不同的.env后缀文件即可 (例如.env.crm)

  * .env文件内容
  ````javascript
  // 除了NODE_ENV 和 BASE_URL 剩下的声明变量需要加前缀 VUE_APP_
  NODE_ENV = "production"
  BASE_URL = "/"
  VUE_APP_PUBLIC_PATH = "/"
  VUE_APP_API = "/"
  VUE_APP_ID = "1"
  ````
  * 代码中调用
  ````javascript
  // 文件中申明的常量都会挂载在 process.env 上面
  console.log(process.env);
  ````

#### 对vue-cli的一些理解

  * vue-cli其实是一个快速搭建webpack的手段，其本质依旧依靠webpack，只是有一些常用的编译以及配置参数做了默认处理，方便开发者快速搭建项目。所以开发者在vue.config.js中的配置会被vue做整理后全部传递给webpack，相当于变相的webpack.config.js。

#### vue配置对webpack修改
  1.configureWebpack 选项
  * 该选项是在将所有设置属性规整之后（包括当前环境的判断）调用，可以修改某些不符合项目配置的属性，vue会将其整合传递给webpack。即该属性下申明webpack.config.js文件中的配置属性即可实现替换

  2.chainWebpack 选项
  * 该选项为 configureWebpack选项的高阶衍生。可以进行更细粒度的修改，例如loader等，也可进行链式调用

  3.css 选择
  * 该选项可以配置css的打包和编译
  * 例如
  ````javascript
  css: {
    //对css的一些处理
    requireModuleExtension: false, //设置为false 将对所有引入的css做编译处理，设置为true 则引入css时需要 后缀添加.module
    extract: process.env.NODE_ENV === "production", // 是否将css提取到一个文件
    sourceMap: false, //map文件开启
    loaderOptions: { //支持的loader传递
      // //向 CSS 相关的 loader 传递选项
      // css: {
      //   // 这里的选项会传递给 css-loader
      // },
      // postcss: {
      //   // 这里的选项会传递给 postcss-loader
      // },
      // sass: {
      //   // 这里的选项会传递给 sass-loader
      // },
      // less: {
      //   // 这里的选项会传递给 less-loader
      // },
      // stylus: {
      //   // 这里的选项会传递给 stylus-loader
      // }
    }
  },
  ````


#### chainWebpack中的链式调用以及各属性的用法
  * 使用命令 vue inspect > output.js 可以在output.js中导出已经配置好的webpack信息
  * webpack-chain插件的链式操作可操作需要修改的配置 
  * 文档：https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans
  * 例如：
  ````javascript
  {
    configureWebpack: {
      // 对 webpack 同名属性的修改
      resolve: {
        alias: {
          //文件名重定义
          "@": path.resolve("src")
        }
      }
    },
    chainWebpack: config => { //给less添加rem
      //configureWebpack的高阶，该函数为确认webpack编译参数之后的回调函数，config为确认后的值可在函数内部进行修改，可进行链式操作
      config.module
        .rule("less")
        .test(/\.less$/)
        .oneOf("vue")
        .resourceQuery(/\?vue/)
        .use("px2rem")
        .loader("px2rem-loader") //webpack的loader执行为从下往上从右往左
        .before("postcss-loader") //插入到less之前 
        .options({
          remUnit: 75
        });
    }
  }
  ````

#### page选项-多页应用的配置和编译