vue-cli 配置使用总结(新)
目录
- 1 什么是vue-cli
- 2 为什么会有多种`vue.config.js`配置?
- 3 vue.config.js的基ue.config.js
- 4 具体配置元素
- 4-1 baseUrl
- 4-2 publicPath
- 4-3 outputDir
- 4-4 assetsDir
- 4-5 indexPath
- 4-6 filenameHashing
- 4-7 pages
- 4-8 lintOnSave
- 4-9 runtimeCompiler
- 4-10 transpileDependencies
- 4-11 productionSourceMap
- 4-12 crossorigin
- 4-13 integrity
- 4-14 configureWebpack
- 4-15 chainWebpack
- 4-16 css.modules
- 4-17 css.requireModuleExtension
- 4-18 css.extract
- 4-19 css.sourceMap
- 4-20 css.loaderOptions
- 4-21 devServer
- 4-22 devServer.proxy
- 4-23 paraller
- 4-24 pwa
- 4-25 pluginOptions
- 5 Babel
- 6 ESLint
- 7 TypeScript
1 什么是vue-cli
vue脚手架指的是vue-cli
,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板
2 为什么会有多种vue.config.js
配置?
我们知道对于不同的框架,比如2.0和3.0他们有不同的配置办法,具体是什么会在下篇文章讲解。
配置地址:https://cli.vuejs.org/zh/config/
3 vue.config.js的基ue.config.js
风格一
module.exports = {
// 选项...
}
风格二
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// 选项
})
4 具体配置元素
4-1 baseUrl
从 Vue CLI 3.3 起已弃用,请使用publicPath
4-2 publicPath
部署应用包的基本 URL,表示把包具体部署到服务的什么位置。
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'
}
4-3 outputDir
生成的生产环境构建文件的目录
4-4 assetsDir
放置静态资源 (js、css、img、fonts) 目录
4-5 indexPath
生成的 index.html 的输出路径
4-6 filenameHashing
文件名 hash 加密
4-7 pages
multi-page 模式下构建应用
多页模式 (MPA Multi-page Application)
单页模式 (SPA Single-page Application)
module.exports = {
pages: {
index: {
entry: 'src/index/main.js', // page 的入口
template: 'public/index.html', // 模板来源
filename: 'index.html', // 在 dist/index.html 的输出
title: 'Index Page', // 标签需要<title><%= htmlWebpackPlugin.options.title %></title>
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
subpage: 'src/subpage/main.js' // 输出文件名会被推导为 `subpage.html`。
}
}
4-8 lintOnSave
是否在开发环境下通过 eslint-loader
在每次保存时进行代码检测
在 @vue/cli-plugin-eslint
被安装之后生效
设置为 true
或 warning
时,eslint-loader 会将 lint 错误输出为编译警告;
默认情况下,警告仅仅会被输出到命令行,不会使编译失败
使用 lintOnSave: 'default'
会强制 eslint-loader 将 lint 错误输出为编译错误
module.exports = {
lintOnSave: 'default'
}
只是生产环境下启用
module.exports = {
lintOnSave: process.env.NODE_ENV !== 'production'
}
4-9 runtimeCompiler
是否使用包含运行时编译器的 Vue 构建版本
具体说明跳转:runtimecompiler 和 runtimeonly是什么
4-10 transpileDependencies
转移所有第三方依赖
默认情况下 babel-loader
会忽略所有 node_modules
中的文件,但通过transpileDependencies
可以设置启动。
4-11 productionSourceMap
Source Map
就是一个信息文件,里面储存着位置信息。
也就是说,Source Map
文件中存储着代码压缩混淆前后的对应关系。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,能够极大的方便后期的调试。
4-12 crossorigin
设置生成的 HTML 中 <script>
和 <link rel="stylesheet">
标签的 crossorigin 属性。
需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
4-13 integrity
在生成的 HTML 中的 <link rel="stylesheet">
和 <script>
标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性。
需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
另外,当启用 SRI 时,preload resource hints 会被禁用,因为 Chrome 的一个 bug 会导致文件被下载两次。
4-14 configureWebpack
简单的配置方式
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}
4-15 chainWebpack
是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
4-16 css.modules
通过css module可以通过通用的配置将指定的css选择器配置成想要的格式
固定的字符串-[文件名]-[原始选择器名]-[长度为5的hash值]。
个人理解:不使用局部模块时,添加css命名空间
4-17 css.requireModuleExtension
参考:https://segmentfault.com/a/1190000040682273?sort=newest
简单来说,css Modules和Vue的scoped很像,是用来处理样式全局化的问题。
4-18 css.extract
css.extract
用于控制是否强制分离vue 组件内的css。
参考https://blog.csdn.net/weixin_44869002/article/details/105831757
4-19 css.sourceMap
是否为css开启sourceMap
4-20 css.loaderOptions
css加载器
module.exports={
css:{
loaderOptions:{
css:{
// css-loader
},
postcss:{
// postcss-loader
}
}
}
}
4-21 devServer
配置代码
devServer:{
//运行代码的目录
contentBase:resolve(__dirname,"build"),
//监视contentBase下的全部文件,一旦文件变化,就会reload
watchContentBase:true,
//监视中忽略某些文件
watchOptions:{
ignored:/node_modules/
},
//端口号
port:3000,
//域名
host:'localhost',
//启动gzip压缩
compress:true,
//自动打开浏览器
open:true,
//开启HMR功能
hot:true,
//不要启动服务的日志信息
clientLogLevel:'none',
//除了一些基本的启动信息以外,其他都不显示
quiet:true,
//如果出错了,不要全屏提示
overlay:false,
//服务器代理 -> 解决开发环境跨域问题
proxy:{
//一旦devServer5000接到/api/xxx的请求,就会把请求转发到另一个服务器3000
'/api':{
//转发后的目标地址
target:'localhost:3000',
// 发送请求时,请求路径重写 /api/xxx -> /xxx (去掉a/pi)
pathRewrite: {
'^/api': ''
}
}
}
}
4-22 devServer.proxy
如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
4-23 paraller
是否为Babel 和 TypeScript 使用 thread-loader
4-24 pwa
Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。
4-25 pluginOptions
用来传递任何第三方插件选项
5 Babel
Babel 可以通过 babel.config.js 进行配置。
6 ESLint
可以通过 .eslintrc 或 package.json 中的 eslintConfig 字段来配置
7 TypeScript
可以通过 tsconfig.json 来配置