前言

本文主要是官方文档阅读笔记摘要，添加点个人理解，欢迎指点。

@vue/cli

• CLI是Command-Line Interface, 翻译为命令行界面；
• 内置Webpack的相关配置;
• 通过CLI选择项目的相关配置，能快速搭建一个基于 Vue.js 的完整系统

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

使用

vue create ${项目名称}

开发实用点

HTML

index.html

• 也就是说，可以在index.html上面直接读取process.env 下面的变量， 如果有其他需求可以在 .env.[mode] 里面定义。

preload和prefetch

preload： 主体渲染之前提前加载；

体现在页面上，就是

<link rel="preload">

prefetch： 浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容；

体现在页面上，就是

<link rel="prefetch">

目前，我们为了首屏加载速度，较多时候，会直接删除这两个操作。 如：

chainWebpack: config => {
  config.plugins.delete('preload') 
  config.plugins.delete('prefetch')
}

构建一个多页应用

vue.config.js - pages

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

URL 转换规则

重点： 以 ~ 开头的URL，导入时是以导入模块的方式导入

<img src="~some-npm-package/foo.png">

但是，elementUI 中 el-image之类的,还是要手动require，例如：

<el-image :src="require('@/assets/foo.png')"/>

public 文件夹引用

• index.html 中 可以用 <%= BASE_URL %>

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

• 在模板中，就需要向你的组件传入基础 URL，再调用

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

CSS

自动化导入

如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 style-resources-loader

向预处理器 Loader 传递选项，css.loaderOptions

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

其他

审查项目的 webpack 配置inspect

vue inspect    #打印解析出来的 webpack 配置、包括链式访问规则和插件的提示

>vue inspect --help
Usage: inspect [options] [paths...]

inspect the webpack config in a project with vue-cli-service

Options:
  --mode <mode>
  --rule <ruleName>      inspect a specific module rule
  --plugin <pluginName>  inspect a specific plugin
  --rules                list all module rule names
  --plugins              list all plugin names
  -v --verbose           Show full function definitions in output
  -h, --help             output usage information

模式

package.json 下面 打包构建命令上面 --mode 后面跟的参数mode, 就是 文件根目录下的 env.[mode]

例如：

{
  "scripts": {
    "test": "vue-cli-service build --mode test",
  }
}
对应的配置文件就是
env.test

环境变量

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

vue.config.js

• 会被 @vue/cli-service 自动加载

publicPath

• 部署应用包时的基本 URL。
• Default: '/' 例如：

网站地址：'https://www.my-app.com/my-app/'
publicPath： '/my-app/'

outputDir

• 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
• Default: 'dist'

assetsDir

• 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
• Default: ''

indexPath

• 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
• Default: 'index.html'

filenameHashing

• 表现为打包后的文件名中的hash部分
• Default: true

pages

• 多页面入口配置

lintOnSave

• Type: boolean | 'warning' | 'default' | 'error'

productionSourceMap

• 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
• Default: true

source map 就是 开发者工具console中，显示右侧的文件名链接是真实的文件名。

例如：在main.js打印个变量的话，
true： main.js:12
false: app.3389.js:1

crossorigin

• 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性

integrity

• 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。

configureWebpack

• 可配置webpack相关的配置，最终会merger到webpack配置中
• Type: Object | Function

chainWebpack

• 链式配置webpack相关配置
• Type: Function

css.requireModuleExtension

• 只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块
• Default: true

css.extract

• 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)
• Default: 生产环境下是 true，开发环境下是 false

css.sourceMap

• 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
• Default: false

css.loaderOptions

• 向 CSS 相关的 loader 传递选项。
• Default: {}

devServer

• 开发环境服务配置

devServer.proxy

• 开发环境代理服务配置

parallel

• 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
• Default: require('os').cpus().length > 1

pluginOptions

• 向插件传递配置

官网

• @vue/cli