源码时代WEB前端干货分享|带你领略vue不一样的风情

最近几年，WEB前端越来越火，也诞生了非常多功能强大的框架，vue便是最近炙手可热的一个框架，不仅简单快速上手快，而且功能非常丰富，能完成各种常用项目！

但是，很多coder对vue的了解都是‘自动化’配置完毕的一个脚手架项目，其实vue项目也可以自定义非常多东西。@vue/cli3.x的脚手架项目初始化是没有vue项目配置文件的，因为官方想要让新手对vue的上授更加快速！所以隐藏了此文件。好处是对新手更加友好，课恶意不用关注那么多繁杂的配置文件，缺点在于很多东西没有办法扩展和自定义。

如果想要深入vue，vue项目配置文件则是我们必定会研究的一个配置文件，下面，就让我们来看看怎么自定义常用项目配置文件！

• 新建项目配置文件

@vue/cli 3.x为了让用户体验’0配置’，所以默认没有配置文件，如果想要自定义配置，在项目根目录新建vue.config.js，所有配置信息都写在其中！

 

• 常用配置

publicPath

等效于webpack配置的output下的publicPath，设置部署的根路径，如果想要修改webpack的publicPath，就在此配置文件中修改。

lintOnSave

是否启用ESlint语法检测（true|false），可以在正式环境下关闭，常规开发如果想要关闭ESlint也可以使用此方法，直接设置为false即可关闭

 

 

productionSourceMap

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

 

devServer.proxy

反向代理（解决跨域问题），如果你的前端应用和后端API 服务器没有运行在同一个主机上，你需要在开发环境下将API 请求代理到API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

设置后，发送的请求都会被代理到虚拟服务器http://12.220.14.27:4152地址，保证发送请求的服务器（虚拟）和数据接口服务器是同一个IP和端口

 

parallel

是否为Babel 或TypeScript 使用 thread-loader。该选项在系统的CPU 有多于一个内核时自动启用，仅作用于生产构建。

以上就是vue项目的一些常用自定义配置项，在默认项目不能满足我们时，就可以使用自定义配置！

Ps：完整vue.config.js配置参考文档：
https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE