Vue报错记录

原创已于 2024-02-22 21:34:47 修改 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-09-07 09:58:02 首次发布

博客主要讲述Vue开发中的常见报错及解决办法。包括css引入background报错，因vue版本和webpack配置问题，需更换写法；Vue和vue-template版本不匹配，要改成一致；npm install报错需清缓存重装；还提到特定错误及Vue路由子路由path不能加/的问题。

css引入中包含background时报错：

This relative module was not found:

* ./p_files/icon_taocan_select.png in ./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/ditubiaozhu/order/ok.vue?vue&type=style&index=0&id=3b11b65a&scoped=true&lang=css&

查阅资料后发现：
vue2.5及以下版本background-image： url('../assets/btn-bgc.png')这种写法没有问题,
但是2.6就会出现这个问题,和webpack配置相关 .vue2.6用的是webapack4.0导致
所以换一种写法就好background-image： url('~@/assets/btn-bgc.png')

webpack资源处理的规则

分为相对路径,没有前缀的路径
带~的路径,相对根目录的路径

1.相对路径: "./assets/logo_blue.png"
2.没有前缀的路径 "assets/logo_blue.png" 被webpack解析为相对路径
3.带~的路径 "~@/assets/theme/logo_blue.png" 被webpack解析为 require(src/assets/theme/logo_blue.png) 动态引入
@在webpack 被resolve.alias配置下等价于/src
4.相对根目录的路径 "/assets/logo_blue.png" webpack不解析

Vue和vue-template版本不匹配

Vue packages version mismatch:

- vue@2.7.16
- vue-template-compiler@2.5.16

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

改成版本一致

npm i vue-template-compiler@2.7.16 --save

清缓存再重新install

npm ERR! code EINTEGRITY
npm ERR! sha1-fx0TuPn/DBqZTcb3PGn31lLHrOI= integrity checksum failed when using sha1: wanted sha1-fx0TuPn/DBqZTcb3PGn31lLHrOI= but got sha1-mGmWgYtzeF5HsZZcw06wk6HUZNA=. (40173 bytes)

解决：

删除package-lock.json

npm cache clean --force
npm install

install后重新生成package-lock.json

error:0308010C:digital envelope routines::unsupported

error:0308010C:digital envelope routines::unsupported-优快云博客

windows命令提示符:

脚本加入

set NODE_OPTIONS=--openssl-legacy-provider &&

开发

Vue路由大坑，，，

子路由的path不需要加/，否则失效。。。

children: [
    {
        path:'article',
        component: () => import('@/page/Login'),

}