vue配置svg 圖示顯示不出來
阿新 • • 發佈:2020-08-05
元件: <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> props: { iconClass: { type: String, required: true }, className: { type: String } }, computed: { iconName() { return `#icon-${this.iconClass}` }, svgClass() { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } } 建立 icons 目錄 svg目錄下放 圖片 index.js裡面 加入 const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) requireAll(req) svg圖片 沒顯示出來 也沒報錯 ??? 解決辦法: npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D 在vue.config.js 中加入 chainWebpack: (config) => { // config.resolve.alias // .set('@', resolve('src')) //3.0的寫法 對映路徑 @代表src 比如要寫一個圖片 <img src='@/assets/img/1.jpg'/>就會讀取src下assets下img下的圖片 const svgRule = config.module.rule('svg'); svgRule.uses.clear(); svgRule .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }); },