Vue-Cli 配置项

官方文档

• Cli：@vue/cli
• Cli服务：@vue/cli-service
• Cli插件: @vue/cli-plugin-xx
  vue-cli-plugin-xx 社区插件

npm update -g @vue/cli

vue-cli-service build --no-clean # 构建之前会被清除

Cli插件

包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件

1. 可以修改 webpack 的内部配置
2. 也可以向 vue-cli-service 注入命令。

# 安装并调用生成器
vue add 插件
# 仅调用生成器
vue invoke 插件

Server服务

serve
基于webpack-dev-server 支持 热重载
build
–report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

inspect
审查 webpack config
注：为了方便查阅，输出的内容不是正确的webpack配置格式

vue inspect > output.js

help
查看命令帮助

特点

Git Hook

内置 yorkie

静态文件

• 如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 /src 的别名 @。(仅作用于模版中)
• 任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
• ~ 引入 node-modules 和 webpack alias 路径

1. / 绝对路径
2. . 相对路径
3. ~ 模块路径
4. @ src默认别名，仅作用于模版中

webpack

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项
Vue Cli webpack

publicPath 如果网站需要支持 IE 的话，建议使用库之前先在页面上引入 current-script-polyfill

内置postcss

模式与环境变量

• development : vue-cli-service serve
• test: vue-cli-service test:unit
• production: vue-cli-service build

–mode 切换使用的模式
自定义 模式 .env.xxxx .env.xxxx.local

---

环境变量： key=value
只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。
内部引用 $变量名

调用环境变量：

1. js 中
   process.env.xxxx
2. HTML中 使用插值
   <%= BASE_URL %>

在 vue.config.js 中，可配置环境变量
下例获取版本信息

process.env.VUE_APP_VERSION = require('./package.json').version
module.exports = {
  // config
}

配置

全局配置

可通过 vue config 命令 查看全局配置

publicPath

baseUrl 3.3版本起已弃用

Type	Default
string	‘/’

取值 空字符串 (‘’) 或是相对路径 (‘./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
以下情况避免使用相对路径：

1. 当使用基于 HTML5 history.pushState 的路由时；
2. 当使用 pages 选项构建多页面应用时。

此项和 webpack 本身的 output.publicPath 一致, 但此项在其他地方也会被用到，因此不应该在webpack中单独配置，统一在此项配置

outputDir

生产环境构建文件的目录

Type	Default
string	‘dist’

同上，始终使用 outputDir 而不要修改 webpack 的 output.path。

assetsDir

放置生成的静态资源的目录（(相对于 outputDir）

Type	Default
string	‘’

从生成的资源覆写 filename 或 chunkFilename 时，assetsDir 会被忽略。

• filename 指列在 entry 中，打包后输出的文件的名称。
• chunkFilename 指未列在 entry 中，却又需要被打包出来的文件的名称。
  参考博客

configureWebpack

通过 outputDir 选项而不是修改 output.path
通过 publicPath 选项而不是修改 output.publicPath

对象方式 与webpack配置方法相同
也可以通过函数方式，进行一些判断

configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
    // 为生产环境修改配置...
  } else {
    // 为开发环境修改配置...
  }
}

chainWebpack 链式配置

vue inspect

对于css 不推荐通过链式配置loader，推荐使用 loaderOptions

devServer

所有 webpack-dev-server 的选项都支持

.proxy

loader

css

.modules
.loaderOptions
.sourceMap

scss

其他

• indexPath 指定输出路径文件，默认 ’index.html‘
• pages 多页（multi-page）模式下的入口文件配置
• lintOnSave 配合 @vue/cli-plugin-eslint 生效。lint 阻止编译
• runtimeCompiler 在 Vue 组件中使用 template 选项
• transpileDependencies 对第三方依赖进行 babel，默认 ‘false’
• productionSourceMap 生产环境的 source map
• crossorigin 注入的标签添加crossorigin