vue-cli 配置使用总结（新）

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 来配置