webpack環(huán)境下

一、打包路徑問題

 解決：到config文件夾中打開index.js文件，更改build里面的assetsPublicPath屬性為"./"。

二、配置scss

1.安裝依賴

npm install node-sass --save-dev
npm install sass-loader --save-dev

2.在用scss的地方寫上

<style lang='scss'></style>

三、配置svg-sprite-loader

1.安裝依賴

npm install svg-sprite-loader --save-dev

2.到build文件夾中打開webpack.base.conf.js文件，加上

{ //options不設置的話，symbolId默認圖標文件名
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: [resolve('圖標路徑')],
    options: {
      symbolId: 'icon-[name]'
    }
}

3.接著上一步，在另一個svg的loader中去掉圖標路徑

exclude: [resolve('圖標路徑')]

4.在script中引入圖標路徑，語句結尾不加分號，es6規(guī)范。

import '目標圖標路徑'

5.上一步麻煩，我們通過require引入所有

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('圖標路徑', true, /\.svg$/)
requireAll(req)

6.接下來通過標簽使用圖標，記得加上#

<svg class='圖標樣式'>
    <use xlink:href='#圖標名'></use>
</svg>

7.還是麻煩，封裝成組件吧

<template>
  <svg class="icon">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script>
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('圖標路徑', true, /\.svg$/)
requireAll(req)
export default {
  props: ['name'],
  computed: {
    iconName() {
      return '#' + this.name
    }
  }
}
</script>
<style>
.icon {
  width: 32px;
  height: 32px;
}
</style>

8.over，可以愉快的使用了

//引入組件
import 組件名 from '組件路徑'
export default {
  components: { 組件名 }
}
//通過標簽使用
<組件名 name='圖標名'></icon>