vue2.0之后配置都写在vue.config.js文件中，这篇文章说一下项目常用的配置

配置项目根路径和指定端口
  1. const port = 7070;
  2. module.exports = {
  3.   // 上下文
  4.   publicPath: '/baseProject',
  5.   devServer: {
  6.     port,
  7.   },
  8. };

配置webpack

由于所有的配置都被封装起来了，所以我们查看webpack配置，可以用以下几个命令

  1. vue inspect //查看webpack全部配置
  2. vue inspect --rules //查看webpack所有规则
  3. vue inspect --rule svg //查看某一个规则的详细配置，此处查看的是svg的配置

使用vue-cli创建一个项目，我们运行vue inspect —rules命令看一下输出
vue.config.js更细粒度的配置webpack - 图1
上面就是所有webpack配置的默认规则，使用第三个命令可以查看具体配置信息

需求

我们有这样一个需求：项目中想使用svg图片，但是不希望用默认的loader解析svg，所以我们要自己配置svg的规则

链式配置webpack

配置前我们需要明白怎样链式配置webpack，就是在vue.config.js里面使用chainWebpack这个方法，不明白没关系，继续走。

实现的功能点总结

1.禁用webpack默认对svg图片解析的行为
2.配置我们自己的规则解析svg图片
3.封装一个组件，自动引入所有的svg图片

文件夹截图

vue.config.js更细粒度的配置webpack - 图2
image.png

功能点一：禁用webpack默认对svg图片解析的行为

首先我们查看一下svg的默认配置，运行vue inspect —rule svg命令
vue.config.js更细粒度的配置webpack - 图3
我们先看一下没禁用vue应用内部对svg图片处理之前，图片能否显示

  1. <template>
  2.   <div id="app">
  3.     <img src="./icons/svg/ty.svg" alt="" />
  4.   </div>
  5. </template>
  7. <script> 
  8. export default {
  9.   name: "App",
  10. };
  11. </script>
  12. <style>
  13. #app {
  14.   font-family: Avenir, Helvetica, Arial, sans-serif;
  15.   -webkit-font-smoothing: antialiased;
  16.   -moz-osx-font-smoothing: grayscale;
  17.   text-align: center;
  18.   color: #2c3e50;
  19.   margin-top: 60px;
  20.   display: flex;
  21.   flex-wrap: nowrap;
  22.   flex-direction: column;
  23.   align-items: center;
  24. }
  25. </style>

接下来vue.config.js文件中，使用chainWebpack这个方法，这个方法会传入一个config参数，利用config.module.rule()这个方法，得到svg这个规则里面的详细配置信息，之后调用.exclude这个Set对象的.add()方法，将我们不希望处理的文件夹路径添加进去，从而完成禁用。

  1. const path = require ('path');
  2. const port = 7070;
  4. function resolve (resolvePath) {
  5.   return path.join (__dirname, resolvePath);
  6. }
  7. module.exports = {
  8.   // 上下文
  9.   publicPath: '/baseProject',
  10.   devServer: {
  11.     port,
  12.   },
  13.   // 链式webpack
  14.   chainWebpack (config) {
  15.     // 禁用vue应用内部对svg的处理
  16.     config.module.rule ('svg').exclude.add (resolve ('./src/icons/svg'));
  17.   },
  18. };

最后我们看一下配置完的svg之后的规则，有什么不同
vue.config.js更细粒度的配置webpack - 图4

很明显在这个规则中我们添加了一个属性exclude,里面包含我们svg图片的路径，exclude翻译过来就是排除的意思，这些都是属性，不是自定义的，记住
禁用之后重新启动项目，ok，报错
vue.config.js更细粒度的配置webpack - 图5image.png

功能点二：配置我们自己的规则解析svg图片

安装依赖

  1. npm i svg-sprite-loader -D

使用config.module.rule(“icons”)创建一个icons规则

  1. const path = require ('path');
  2. const port = 7070;
  4. function resolve (resolvePath) {
  5.   return path.join (__dirname, resolvePath);
  6. }
  7. module.exports = {
  8.   // 上下文
  9.   publicPath: '/baseProject',
  10.   devServer: {
  11.     port,
  12.   },
  14.   // 链式配置webpack
  15.   chainWebpack (config) {
  16.     // 禁用系统内部对svg的处理
  17.     config.module.rule ('svg').exclude.add (resolve ('./src/icons/svg'));
  18.     // 新建规则处理svg文件
  19.     config.module
  20.       .rule ('icons')
  21.       .test (/\.svg$/) //添加匹配规则
  22.       .include.add (resolve ('./src/icons/svg')) //添加我们要处理的文件路径
  23.       .end ()  //上面的add方法改变了上下文，调用end()退回到include这一级
  24.       .use ('svg-sprite-loader') //使用"svg-sprite-loader"这个依赖
  25.       .loader ('svg-sprite-loader')//选中这个依赖
  26.       .options ({
  27.         symbolId: 'icon-[name]', // 这个配置是这个包的配置不属于webpack，可以查看相关文档，symbolId指定我们使用svg图片的名字
  28.       }); //传入配置
  29.   },
  30. };

使用vue inspect —rule icons查看我们新配置的icons规则
vue.config.js更细粒度的配置webpack - 图6
页面中使用，成功启动，图片也可以展示

  1. <template>
  2.   <div id="app">
  3.     <svg>
  4.       <use xlink:href="#icon-ty"></use>
  5.     </svg>
  6.   </div>
  7. </template>
  10. <script>
  11. import "./icons/svg/ty.svg";
  13. export default {
  15.   name: "App",
  17. };
  18. </script>
  20. <style>
  21. #app {
  22.   font-family: Avenir, Helvetica, Arial, sans-serif;
  23.   -webkit-font-smoothing: antialiased;
  24.   -moz-osx-font-smoothing: grayscale;
  25.   text-align: center;
  26.   color: #2c3e50;
  27.   margin-top: 60px;
  28.   display: flex;
  29.   flex-wrap: nowrap;
  30.   flex-direction: column;
  31.   align-items: center;
  32. }
  33. </style>

功能三：封装一个组件，自动引入所有的svg图片

到这一步我们的svg就算是配置成功，但是项目中不可能只有一个svg图片，我们不可能每次使用svg图片的时候都要引入，我们希望更加丝滑一些，所以我们要封装一个组件并且自动引入所有的svg图片
我们希望用的时候，传入一个名字就可以

  1. <Svgs name="ty"></Svgs>

新建Svg.vue

  1. <template>
  2.   <div>
  3.     <svg>
  4.       <use :xlink:href="className"></use>
  5.     </svg>
  6.   </div>
  7. </template>
  8. <script>
  9. export default {
  10.   props: {
  11.     name: {
  12.       type: String,
  13.       required: true,
  14.     },
  15.   },
  16.   computed: {
  17.     className() {
  18.       return `#icon-${this.name}`;
  19.     },
  20.   },
  21. };
  22. </script>

在icons文件夹中新建index.js

  1. const req = require.context ('./svg', false, /\.svg$/);//这是webpack里面的方法，接收一个文件夹路径，接受一个布尔值是否递归遍历，接收一个正则，匹配这个文件，返回的req就是一个函数，可以自己输出看一下
  2. req.keys ().map (req);

main.js中引入

  1. import Vue from 'vue';
  2. import App from './App.vue';
  3. import '@/icons/index.js';
  4. Vue.config.productionTip = false;
  6. new Vue ({
  7.   render: h => h (App),
  8. }).$mount ('#app');

App.vue中使用这个组件

  1. <template>
  2.   <div id="app">
  3.     <Svgs name="ty"></Svgs>
  4.   </div>
  5. </template>
  7. <script>
  8. import Svgs from "comp/Svg.vue";
  9. export default {
  10.   components: {
  11.     Svgs,
  12.   },
  13.   name: "App",
  14. };
  15. </script>
  17. <style>
  18. #app {
  19.   font-family: Avenir, Helvetica, Arial, sans-serif;
  20.   -webkit-font-smoothing: antialiased;
  21.   -moz-osx-font-smoothing: grayscale;
  22.   text-align: center;
  23.   color: #2c3e50;
  24.   margin-top: 60px;
  25.   display: flex;
  26.   flex-wrap: nowrap;
  27.   flex-direction: column;
  28.   align-items: center;
  29. }
  30. </style>

图片成功显示，配置成功