六、项目最近实践 ---kkb

// vue.config.js
const port = 7070
const title = ‘vue项目最佳实践‘

module.exports = {
  publicPath: ‘/best-practice‘, // 部署应?用包时的基本 URL 
  devServer: {
    port
  },
  configureWebpack: {
    // 向index.html注?入标题
    name: title
  }
}


// index.html
<title><%= webpackConfig.name %></title>

npm i svg-sprite-loader -D 

const path = require(‘path‘)
// 将传入的相对路径转换为绝对路径
function resolve(dir){
  return path.join(__dirname, dir)
}

chainWebpack(config) {
  // 配置svg规则排除icons?目录中svg?文件处理理
  config.module.rule(‘svg‘)
    .exclude.add(resolve(‘src/icons‘))
  
  // 新增icons规则，设置svg-sprite-loader处理理icons?目录中的svg 
  config.module.rule(‘icon‘) //新增icons规则 
    .test(/\.svg$/) // 设置test选项
    .include.add(resolve(‘src/icons‘)) // 加入include，include选项是数组
      .end() //add完上下?是include数组不是icons规则，使?end()回退 
    .use(‘svg-sprite-loader‘) // 添加loader
      .loader(‘svg-sprite-loader‘) // 切换上下文为 svg-sprite-loader
      .options({ symbolId: ‘icon-[name]‘ }) // 指定选项，如果到时候图片名称是 wx.svg，这里就是 icon-wx
      .end() // 回退
}

<svg>
  <use xlink:href="#icon-wx"></use>
</svg>

import ‘@/icons/svg/wx.svg‘

//  src/icons/index.js 
// 利用webpack的require.context 自动导入
// 返回的req是只去加载svg目录中的模块的函数
// 参数2:不要继续往下递归，参数3:匹配的规则
const req = require.context(‘./svg‘, false, /\.svg$/)

// 遍历加载上下文中所有项 
req.keys().map(req)


// main.js
import ‘./icons‘

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script> 
export default {
  name: ‘SvgIcon‘,
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ‘‘
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return ‘svg-icon ‘ + this.className
      } else {
        return ‘svg-icon‘
      }
    }
  }
}
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

import Vue from ‘vue‘;
import Icon from ‘@/components/Icon‘

// Icon组件全局注册一下
Vue.component(‘Icon‘, Icon)

<Icon icon-class="qq" />
<Icon icon-class="wx" />