Vue报错记录

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-CSDN博客

windows命令提示符:

脚本加入

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

开发

Vue路由大坑，，，

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

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

        }