Vue cli 笔记

作者: 醉月思发布日期: 2020-06-23 分类: 学习笔记

2020-04-19T02:47:53.png

安装

全局安装@vue/cli

yarn global add @vue/cli

检查是否安装成功(需重启更新环境变量)

vue --version

2020-04-19T02:36:37.png

快速原型开发

新版本Vue中增加了该功能，方便快速进行单个Vue文件开发，需要先额外安装一个全局的扩展。

yarn global add @vue/cli-service-global

入手尝鲜

新建index.vue文件

<template>
    <div>Hello Vue</div>
</template>

运行服务

vue serve index.vue

效果

2020-04-19T02:47:22.png

创建项目

略

vue.config.js

在vue cli 3.x/4.x 中，使用vue.cofig.js来进行一些包括webpack的配置。比如我们可以想要一个控制台输出编译时间的配置，可以在如下设置

const moment = require('moment')

module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = '三只蜜桔后台管理系统·商户版',
        args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')
        return args
      })
  }
}

亦或者，我们想要在生产环境禁用console.log

const moment = require('moment')

module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = '三只蜜桔后台管理系统·商户版',
        args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')
        return args
      })
    config.optimization
      .minimizer('terser')
      .tap(args => {
        Object.assign(args[0].terserOptions.compress, {
          pure_funcs: ['console.log']
        })
        return args
      })
  },
  productionSourceMap: false,
  configureWebpack: {
    output: {
      filename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`,
      chunkFilename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`
    }
  }
}

配置时要分清“项目配置”和“构建工具细节”

vue.config.js 最方便的地方，是它把常用的 webpack 能力包在了 Vue CLI 的配置层里。像输出目录、公共路径、开发服务器代理、Source Map 和插件参数，优先查 Vue CLI 是否已经提供了直接选项。只有当现成选项无法表达需求时，再使用 configureWebpack 或 chainWebpack 深入修改。

两种方式的区别可以这样理解：configureWebpack 适合合并一段普通的 webpack 配置；chainWebpack 适合精确找到已有的 loader 或 plugin 再修改。后者灵活，但也更依赖 Vue CLI 内部生成的名称。升级 CLI 后配置突然失效，往往不是 webpack 能力消失了，而是原先链式访问的节点已经变化。

生产环境删除 console 的取舍

直接把 console.log 加入 pure_funcs 能减少普通调试输出，但不应把所有 console 调用都不加区分地删掉。有些项目会使用 console.error 记录真正的异常，线上出现白屏时，浏览器控制台可能是最后一点线索。更稳妥的做法是在开发层封装日志，按环境和级别决定是否输出，或者只在生产构建中删除明确的调试日志。

构建时间写进文件名也要考虑缓存。每次构建都使用完全不同的时间前缀，会让所有资源 URL 同时变化，用户无法复用任何旧缓存。webpack 默认的内容哈希更适合这个目的：只有文件内容变了，文件名才变。如果需要追踪发布批次，可以把构建时间显示在页面版本信息或独立的元数据文件中。

现在的选择

Vue CLI 现在已经进入维护状态，新建 Vue 3 项目通常优先考虑 create-vue 和 Vite。这不代表老项目必须立刻迁移：已经稳定运行、插件依赖明确的 Vue CLI 项目，继续维护往往比为了“新”而换构建工具更划算。但如果是从零开始，就没必要再把这篇旧笔记当成唯一入口。

可用性说明：本文发布于 2020 年 6 月，距今已超过五年。文中涉及的软件版本、接口、下载地址、命令参数和操作界面可能已经发生变化，部分方案在当前环境下可能失效。请结合官方最新文档核对后再操作，生产环境使用前务必先行验证。

版权声明: 本文首发于指尖魔法屋-Vue cli 笔记（https://blog.thinkmoon.cn/post/834-notes-vue-cli/）转载或引用必须申明原指尖魔法屋来源及源地址！