首页 > 其他分享 >vue webpack 报错处理

vue webpack 报错处理

时间:2023-10-14 17:09:18浏览次数:38  
标签:vue console js webpack static 报错 loader

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去引用就行了。

标签:vue,console,js,webpack,static,报错,loader
From: https://blog.51cto.com/u_16273048/7862253

相关文章

  • Vue3| 组合式 API——provide 和 inject
    作用和场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信 跨层传递普通数据步骤:1.顶层组件通过provide函数提供数据provide('key', 顶层组件中的数据) 2.底层组件通过inject函数获取数据const message=inject('key')   //'k......
  • Vue3| 模板引用、defineExpose宏函数
    模板引用的概念:通过ref标识获取真实的dom对象或者组件实例对象 使用:1.调用ref函数生成一个ref对象<script setup>import {ref} from 'vue'const h1Ref=ref(null)</script>2.通过ref标识绑定ref对象到标签<script setup>import {ref......
  • Vue3| 组合式 API 下的 子传父
    步骤:1.子组件内部通过emit方法触发事件①通过defineEmits编译器宏生成emit方法<script setup>const emit= defineEmits(['get-message'])  //get-message:可以触发的事件</script>②触发自定义事件,并传递参数<script setup>const emit= define......
  • Vue3| 组合式 API 下的父传子
    步骤:一、父给子传写死的值1.父组件中给子组件以添加属性的方式传值<script setup>import sonComVue from './son-com.vue'  //局部注册</script> <template><sonComVue message="黑马程序员"></sonComVue></template>2.子组件内部通过pro......
  • Vue3| 组合式API——computed 计算属性函数
    计算属性基本思想和Vue2的完全一致,组合式API下的计算属性只是修改了写法 核心步骤:1.导入computed函数<scriptsetup>import{computed}from'vue'</script>2.执行函数在回调参数中return基于响应式数据做计算的值,用变量接收<scriptsetup>import{com......
  • Vue3| 组合式API——reactive 和 ref 函数
    Vue中默认的数据并不是响应式的,如果我们希望数据是响应式的,则需要通过reactive或者ref进行处理。 reactive():作用:接收对象类型的数据作为参数传入并返回一个响应式对象reactive不能处理简单类型的数据 reactive使用步骤:1.在<scriptsetup>里,从vue包中导入......
  • vue-quill-editor富文本编辑器
    安装npm vue-quill-editornpminstallvue-quill-editor--save引入main.js文件里//字典标签组件importquillEditorsfrom"./components/quillEditor/index";//注册全局容器Vue.component("quillEditors",quillEditors);//富文本框文件目录预览openai的chatgpt描述一个表......
  • JS加密/解密之webpack打包代码逆向
    Webpack是一个强大的打包工具,能够将多个文件打包成一个或多个最终的文件。然而,将已经经过打包的代码还原回原始源代码并不是一件直接的事情,因为webpack打包的过程通常会对代码进行压缩、混淆和优化,丢失了部分变量名和代码结构的信息。因此,完全还原打包前的源码可能并不现实。但......
  • vue项目中上传文件失败记录
    页面请求报【Failedtoloadresource:net::ERR_CONNECTION_ABORTED】错误,查了下是文件过大导致上传失败,element-ui本身没有大小限制,最后排查是Nginx默认是上传一个不能超过1M大小的文件#设置客户端传文件通过nginx大小client_max_body_size1024m;......
  • 下载的PC游戏启动后报错:无法加载 DLL“steam_api64”: 动态链接库(DLL)初始化例程失败
    无法加载DLL“steam_api64”:动态链接库(DLL)初始化例程失败。(异常来自HRESU解决方式:将文件夹拷贝到Steam-->steamapps文件夹下面还好是忍者神龟抛了个异常,才找到了问题所在,论抛异常的重要性!!!忍者神龟如龙......