vue webpack 报错处理
  Rzlnp0of1uWH 2023年11月02日 32 0

1. vue-cli3中console.log报错:

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at

(1). 原因: 使用ESLint检查代码质量是进行提示的.

(2). 解决: window.console.log(res);


2. 图片引入:

{
  id: 1,
  src: require('@/assets/icon/type1.svg'),
}


webpack配置如下


{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  }


 一直报404的错误,应该是webpack没有找到图片。如果代码改为以下这种格式就没有问题,但是我需要随机排序,不能写死顺序,这种问题应该如何解决呢?


 js动态生成的路径无法被url-loader解析到,如果你去build,会发现图片甚至不会打包输出到dist目录(webpack是按需打包的)。


如果你是vue-cli初始化的项目,解决的办法:

第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/static的),比如图片放在static/a.png

第二步,js中使用/static/a.png去引用就行了。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
Rzlnp0of1uWH
作者其他文章 更多

2023-11-14

2023-11-13

2023-11-13

2023-11-13

2023-11-02

2023-11-02

2023-11-02

vue

2023-11-02

2023-11-02

2023-11-02