开茶会的树洞

主题

前端常见问题 ​

简述 ​

工作中遇到的很多小问题，解决了但是疏于整理，导致重复问题重复仍需百度搜索，特有此记录小问题。

图片跨域 ​

静态资源的一个重要原因（80%）是一位服务器端未设置跨域的白名单，以至于造成跨域，还有另外一种便是客户端未设置跨域请求Access-Control-Allow-Origin，这两种情况十分好解决。

图片跨域问题我是在webgl请求资源时出现的，代码中实例化一个image对象，想要请求跨域的资源，image类同样能够设置一个跨域请求头：

js
const img = new image();
img.src = 'xxx' //地址
img.crossOrigin = 'anonymous' // 跨域设置

crossOrigin有两个可以设置的选项，use-credentials和anonymous，两者设置后都可以跨域，但前者可以带cookie，后者不可。

package.json参数解析 ​

js
  // 为 true 时，不发布 npm 包。
 "private": true,
  // 将会覆盖main字段的效果
  // 如果写了import和require，表名用这两种方式引入时，引入指向的不同文件
 "exports": {
    ".": {
      "import": "./dist/es/index.js",
      "require": "./dist/js/index.js"
    }

vue文件不被引用时，是否会被打包 ​

不会，vue根据路由和引用去打包

前端播放mp4黑屏 ​

视频可能是H.265编码，无法直接播放。H.264的可以播放，使用bandicam可以设置编码格式。

cjs umd es amd ​

都是打包导出后的形式，只需要知道 umd是cjs与amd的混合，可以直接代替两者，这样格式打包出来的是使用script标签引入的，es是ES6模块化方式，导出的可用于import形式引入

TypeError: Found non-callable @@iterator ​

不是可迭代对象，所谓的JS中的可迭代对象包括常用的集合对象（数组、Set、Map集合）和字符串都是可迭代对象。

vue2 require 动态拼接图片地址 ​

参考博客 在前端，模块的引入默认是不支持全动态引入的（即：require(变量)），支持半动态引入（即：require(静态路径+动态变量路径)）

html
<!-- 这样是能获取到的 -->
<img class="img" :src="require(`${getImageUrl()}`)" alt="">
html
<!-- 这样不行 -->
<img class="img" :src="require(getImageUrl())" alt="">

vue3 动态获取图片地址 ​

直接写不太行，需要通过返回new URL才能正确获取到,虽然也可以用import把图片引入，看具体场景吧

html
<img :src="getImage()" alt="">
js
const getImage = (index) => {
  return new URL(`../../../assets/test.png`, import.meta.url).href
}

请求参数中带;"&特殊符号的处理 ​

这些符号会将参数分割，导致参数错误或者请求错误,使用encodeURIComponent将参数中特殊符号转换一下

vite热更新不起作用 ​

检查route引入的组件名称是否被改动，特别是大小写，很有可能是这个问题

vue proxy(object) ​

在某些情况下，如存如indexDB时，proxy(object)导致报错，因为indexDB需要单一类型的键值object，需要转换一下

js
JSON.parse(JSON.stringify(pObject))

vue3 @click参数 ​

绑定时只写方法名，那么默认参数是点击默认返回的event,如果加了括号写了参数，返回的是填写的参数，如果两者同时需要，传$event作为默认event

vue3 代码提示用@替换src ​

有时候代码提示会直接用src/xx/xx去引用，需要我们去配置tsconfig.json(如果是js则为jsconfig.json)中的 paths

js
    "paths": {
      "@/*": ["src/*"],
    },

vite中也要配置

js
// vite.config
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },

vue ios h5 首图不加载 ​

在开发嵌套h5时，发现在ios中，如果页面图片只有一张，这张图片可能不会加载，多张图片反而不会有这个问题。 为了解决这个问题，使用vue-lazy,但仍需要手动设置图片的宽高，否则样式会出问题

vite打包兼容老版本浏览器 ​

在开发h5时，遇到魅族手机在webview里不展示，但是在魅族浏览器里展示正常，经排查，vue2+webpack打包后正常展示，vue3+vite不展示，一下是解决方法,这应该是魅族手机中webview内核版本偏低，即浏览器版本偏低。

js
// vite.config.js
build:{
  target:["es2015"]
}

TS 给已有 interface 添加属性 ​

在项目根目录或src下创建一个.d.ts文件，这里以vitepress为例，添加了一个store属性

js
import { VitePressData } from "vitepress";
declare module "vitepress" {
  export interface VitePressData {
    store: any;
  }
}

svg 更换颜色 ​

js
// 直接赋颜色
fill="color"
// 这会让svg的颜色与它的父元素相同
fill='currentColor'

图片适配宽高比 ​

如果限定高度，或者限定宽高比

css
.ratio{
  /* 16比9宽高比 */
  height: calc(100vw / 16 * 9);
  /* 图片不重复 */
  background-repeat: no-repeat;
  /* 图片居中 */
  /* 也可以写成只显示图片的某一部分 */
  background-position: center;
}
/* 根据宽高比再去判断是否大于16/9,然后去设置下面两个类 */
.size1 {
  background-size: 100% auto;
}

.bg-size2 {
  background-size: auto 100%;
}

更新于:

夜茶 2020 ~ 2026