zoukankan      html  css  js  c++  java
  • 前端报错: error in ./src/assets/fonts/iconfont.svg?t=1523541245904,Module parse failed: Unexpected token (1:0),vue.config.js中引入chainWebpack后报错

    报错如下:

    由于我在登录页面中,虽然icon图标提供了一系列的图标,但是你找完后发现并没有那个图像和小锁,此时可以通过第三方的图标库来实现。第三方图标库采用阿里图标库,iconfont.css中就有我们需要用到的图标。

    1、 将素材中的fonts目录放到assets目录下,

    2、 在main.js入口文件中导入iconfont.css

    import './assets/fonts/iconfont.css'

    3、 打开Login.vue,为el-put添加图标,注意图标前的点不要复制。iconfont为基础类,icon-xxx为具体哪个图标

    复制代码
    <!-- 登录表单区 -->
          <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
            <el-form-item prop="username">
              <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
    复制代码

    但是,当我在项目中使用了svg之后,参考:https://www.cnblogs.com/zwh0910/p/15239530.html

    由于在vue.config.js中引入了如下内容就报错:error  in ./src/assets/fonts/iconfont.svg?t=1523541245904,Module parse failed: Unexpected token (1:0)

    const path = require('path')
    
    function resolve(dir) {
      return path.join(__dirname, '.', dir)
    }
    
    module.exports = {
      chainWebpack: config => {
        config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
        config.module
          .rule('svg-sprite-loader')
          .test(/\.svg$/)
          .include
          .add(resolve('src/icons')) //处理svg目录
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
      },
    }

    经过百度,终于找到解决办法,修改chainWebpack的内容如下:

    chainWebpack: config => {
            // config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
            // 找到svg 默认的处理规则,将某个目录排除处理里的范围
            config.module.rule('svg').exclude.add(resolve('src/icons')).end();
            // 新加一个icons的处理规则,用svg-sprite-loader处理,将上面那个目录添加到这个规则的处理范围内
            config.module
                .rule('svg-sprite-loader')  // 新添加的处理规则
                .test(/\.svg$/)
                .include                   // 添加
                .add(resolve('src/icons')) //处理svg目录
                .end()
                .use('svg-sprite-loader') // 使用svg-sprite-loader处理
                .loader('svg-sprite-loader')
                .options({
                    symbolId: 'icon-[name]'
                })
        },

    大意是:对于默认的处理规则svg,要排除掉新的处理规则的目录。对于新添加的一个处理规则svg-sprite-loader,将默认处理规则svg中排除的目录添加进来。

    注意:svg文件的位置为src/icons

  • 相关阅读:
    vue单页面项目返回上一页无效,链接变化了,但是页面没有变化
    H5页面在iOS网页中的数字被识别为电话号码,字体颜色变黑色,且颜色不可改变
    vue-quill-editor 封装成组件;图片文件流上传;同一页面多个编辑器样式异常解决办法
    React 从零搭建项目 使用 create-react-app脚手架
    使用git pull文件时和本地文件冲突怎么办?
    webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?
    前端使用JS-SDK上传图片(文件)到七牛
    vue图片裁剪插件vue-cropper
    小程序图片裁剪组件
    微信小程序1rpx border ios真机显示不全问题
  • 原文地址:https://www.cnblogs.com/zwh0910/p/15672262.html
Copyright © 2011-2022 走看看