本文介绍了如何配置vue-cli3.0的vue.config.js并与大家分享，具体如下：

英文文档vue-cli 3 vue-cli 3中文文档webpack 4插件webpack-chain

椎间盘置换

VUE命令行界面第3版与第2版大不相同

vue-cli 3的Github仓库已经从原来独立的github仓库迁移到vue项目下的vue-cli 3的项目架构，完全抛弃了vue-cli 2的原有架构，vue-cli 3的设计更加抽象简洁(后面可以详细描述)。vue-cli 2或webapck 3 vue-cli 3的设计原则是“0配置”。vue-cli 3提供了vue ui命令和可视化配置，更加人性化。由于vue-cli 3也学习了rollup的零配置思想，所以在项目初始化之后就没有熟悉的构建目录了。没有webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js等配置文件

那么，我们如何配置自己的项目呢？

实际上，这一切都要归功于vue-cli 3的项目初始化，它帮助开发人员解决了80%，甚至大部分的webpack配置。

上述功能由@vue/cli-service依赖项处理。当你在node_modules目录下的@vue中打开cli-service时，你有没有发现一种熟悉的感觉？

话虽如此，在实际的开发过程中，开发者肯定还是需要修改自己的配置。那么，我们该怎么办呢？

在这种情况下，您需要在项目的根目录下手动创建一个新的vue.config.js。请在这里参考我提供的一个基本模板[[vue.config.js]]。

所以现在所有的问题都集中在——我如何修改这个配置文件？

一些简单的配置，比如多页、界面代理，可以自己看官方的文档，文章顶部提供。

如果需要更改原始webpack的配置，该怎么办？

vue-cli 3中的Cli-service在webpack 4中引入了webpack-chain插件，同时对配置进行了高度抽象，使得开发人员比以前更难随意修改配置。在个人实践中，我总结了几点供大家参考：

首先，修改点主要位于vue.config.js中

配置web pack :(config)={//简单/基本配置，比如引入新插件}。chainwebpack k :(config)={//chain configuration }加载器选项： { CSS 3360 {//这里的选项会传递给CSS-loader}、Post CSS 3360 {//这里的选项会传递给post CSS-loader}}具体操作可以在文章顶部链接找到，这里不再赘述。

核心要点是：在cmd中键入vue inspect output.js，这样我们就可以得到一个最终有效的webpack配置信息，从而避免自己阅读cli-service源代码。

然后，我举一个栗子：

在我的项目中，您需要修改eslint的配置，使其不会检测到我的项目下的src/lib目录，因为这是一个外部库文件(实际上，您也可以创建一个新的。eslintignore文件直接在项目中进行处理，但我选择在这里修改webpack文件)

第一步是： vue检查输出

第二步，在output.js中搜索eslint相关配置，结果如下：

在第三步：中，我确认要修复排除配置项

第四步，去Mozilla-中微子/webpack-chain全局搜索exclude，结果如下：

第五步是：因为排除只出现过一次，Love O2O。但是我看到了include，然后搜索了include，结果如下：

第六步：指的是写include，以此类推：

最后，让我们看看vue inspect output.js，

总结一下，用了几次webpack-chain，相信我，你会发现很多规则，vue-cli 3很简单。

附言

当你准备开始一个新项目时，请提前想清楚项目的架构和使用的ui组件等等

就像我们的项目

1.使用相关的用户界面组件2。封装axios服务3。使用路由拆分(基于历史记录)4。路线切换动画。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。