技术日常 - 2021年12月 - 《前端日常记录总结》

2021-12-20
- input 上传 rar 类型文件前端读取 type 为空字符串
2021-12-03
- 微服务died in status LOADING_SOURCE_CODE: application
2021-12-01

2021-12-20

input 上传 rar 类型文件前端读取 type 为空字符串

rar 文件 file.type 为空字符串
zip 文件 file.type 为 “application/x-zip-compressed”
针对压缩包需要有特殊的文件类型判断逻辑

2021-12-03

微服务died in status LOADING_SOURCE_CODE: application

‘xxx’ died in status LOADING_SOURCE_CODE: application
‘xxx’ died in status LOADING_SOURCE_CODE: Failed to fetch TypeError: Failed to fetch

2021-12-01

vite windows 下 npm run dev 异常 commonjs 问题

Uncaught SyntaxError: The reuested module ‘/node_modules/vuedraggable/dist/vuedraggable.umd.js’ does not provide an export named ‘default’

windows 环境打包问题
解决方法：vite.config.js 加入 rollup-plugin-node-resolve、rollup-plugin-commonjs

// ...
import resolvePlugin from 'rollup-plugin-node-resolve';
import commonjsPlugin from 'rollup-plugin-commonjs'
const xx = {
  plugins: [
    resolvePlugin(),
    commonjsPlugin(),
    // ...
  ]
}

LF 和 CRLF 的区别， lint 错误怎么处理

warning: LF will be replaced by CRLF in xx.vue.
The file will have its original line endings in your working directory
参考：理解 CRLF, LF

element-plus 国际化相关调整

element-plus/lib/locale/index.js 不存在

node import/export 支持

使用 .ejs 后缀，后者 package.json 中设置 “type”: “module”

vue 路由跳转时还停留上一个组件滚动未知，怎么滚动到顶部

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { top: 0 }
  },
})

参考：vue-router 滚动行为

video 怎么像图片一样铺满屏幕

让视频铺满屏幕区域 object-fit: fill;

项目中加 .vscode/settings.json，统一 vscode 自动 fix 配置

el-dialog 打开弹窗后，为什么滚动条会滚动到顶部？

怎么计算矩形相交

Parsing error: “parserOptions.project” has been set for @typescript-eslint/parser

vue3 + ts 项目中，新增 vue 文件或修改 vue 文件名，vue-cli 重新运行时都会报如下错误，eslint 校验失败
Module Warning (from ./node_modules/@vue/cli-plugin-elint/node_modules/eslint-loader/index.js)
0:0 error Parsing error: “parserOptions.project” has been set for @typescript-eslint/parser
The file does not match your project config: xx.vue.
The file must be included in at least one of the projects provided.
注意： typescript 版本问题，升级版本即可

vue3 setup 里面拿 refs

‘vue/no-v-model-argument’:’off’

vue dispatch

node 图片压缩工具

import imagemin from 'imagemin'
import imageminJpegtran from 'imagemin-jpegtran';
import imageminPngquant from 'imagemin-pngquant';
import imageGifsicle from 'imagemin-gifsicle'

const files = await imagemin(['images/*.{jpg,png,gif}'], {
  destination: 'build/images',
  plugins: [
    imageminJpegtran(),
    imageminPngquant({
      quality: [0.6, 0.8]
    }),
    imageminGifsicle()
  ]
})

console.log(files)

/*
import imagemin from 'imagemin'
import imageGifsicle from 'imagemin-gifsicle'

(async () => { 
  await imagemin(['images/*.gif'], {
    destination: 'build/images',
    plugins: [
      imageminGifsicle({
        optimizationLevel: 3
      })
    ]
  })
  console.log('Images optimized');
})()
*/

vue3 Extraneous non-props attributes (class) were passed to component but could not be automatically inherited

在自定义组件上添加了 border、style、class 等属性，而自定义组件内部又没有用 prop 去接收，因此警告了。所以要么在组件内部加上属性接收，要么直接去掉改属性。
参考：Vue3.x属性继承报错解决

vue3 单独 ts 中， import 时 toRefs 不能重 vue 中结构出来

单独的 ts 中

import { computed, toRefs, ref } from 'vue'

TS2305: Module “../../node_modules/vue/dist/vue” has no exported member ‘toRefs’、
“ref”
可以改为

 import { toRefs } from '@vue/reactivity'

实际问题是 typscript 版本问题，升级即可

JSMpeg.js 移动端 video 兼容性差替代方法

vite vuex 在独立 ts 中直接引入 store 模块加载异常问题

注意 import 直接导出的 Module {} 类型

vue3 /deep/ 改 :deep() 后 stylelint 检验失败相关配置修改

and /deep/ combinators have been deprecated. Use :deep() instead
Unexpected unknown pseudo-class selector: “:deep” (selector-pseudo-class-no-unkown) stylelint（selector-pseudo-class-no-unkown）

// .stylelintrc.js

module.exports = {
  rules: {
    "selector-pseudo-class-no-unkown": [
      true,
      {
        ignorePseudoClasses:['deep', 'slotted', 'global']
      }
    ]
  }
}

vue3+ts vue-cli 项目 template 设置了 ref，但 script 中未使用，部署后会异常

开始时没有问题，部署到服务器就有问题了。注意：写了 ref，script 中一定要用变量接收

vue-router 4.0 404 页面匹配与其他所有页面 * 写法改变问题

Uncaught Error: Catch all routes (“*”) must now be defined using a param with a custom regexp.

{
  // 其他路径
  path: '/:pathMatch(.*)*', // vue-router 4.x, v3.x: '*'
  name: '404NotFound',
  component: () => import('404.vue')
}

滚动视觉差效果组件的使用及注意事项 rellax

host 管理工具 SwitchHost 使用及注意事项

windows 下需要以管理员权限打开，配置后，可能有缓存，最好使用 chrome 隐私模式测试切换后效果。chrome浏览器隐私模式打开方法： ctrl + shift +n

字体文件 font-family-no-missing-generic-family-keyword

单引号都不行，大小写不行，引入外部字体不需要配置 webpack，路径写对即可，ttf 文件才行

前端请求接口时，注意加 sleep await 5s 测试弱网 loading 的情况

await new Promise(resolve => setTimeout(resolve, 5000))

JS 中 class 为什么要增加 private 属性、方法，get/set, 具体应用在哪些场景

不想暴露给实例，仅 class 内部可使用的。#标识

Vue3 响应式有了 reactive，为什么还要有 ref，他们有什么区别?

动效组件 aos 在 vue+ts项目中的应用与注意事项

aos 与 el-scrollbar 冲突，使用后 aos 的滚动时间无法触发

Vue 3.2 setup 语法糖，通过 ref 拿不到 setup 声明的函数、变量

需要使用 defineExpose 暴露

webpack ~ 相对路径配置

cdn 效果怎么监测

灰度 + 类似埋点的性能数据监控上报

前端日常记录总结

2021年12月