Skip to main content

踩坑小记

· 11 min read
LIU

ssh​

  • SSH连接报错:Permission denied, please try again

    • 当使用 SSH 登录云服务器 ECS （Elastic Compute Server） Linux 服务器时，如果是 root 用户，即便正确输入了密码，也会出现类似如下错误信息。

      Permission denied, please try again. SSH 服务器拒绝了密码，请再试一次。 但非root用户可以正常登录，而且root用户通过 管理终端 登录也正常。

    • 通过 管理终端 （VNC连接）进入系统。 通过 cat 等指令查看 /etc/ssh/sshd_config 中是否包含类似如下配置： PermitRootLogin no

    • PermitRootLogin yes 使用如下指令重启 SSH 服务： service sshd restart

GitHub Action​

Action deploy失败原因

rsync exited with code 255

  • rsync未启动
  • 猜测是 ssh-deploy 使用的 rsync 支持 RSA 密钥对而不是 ED25519 密钥对。尝试创建一个新的 RSA 密钥并且它有效。通过生成 RSA 密钥重试。（参考https://github.com/easingthemes/ssh-deploy#1-ssh_private_key-required）
    • 应使用 PEM 格式生成密钥。你可以使用这个命令ssh-keygen -m PEM -t rsa -b 4096
    • cat id_rsa.pub >> authorized_keys
  • vi /etc/ssh/ssh_config
    • ssh上修改，VNC登录修改，(两个地方打开不一致？) 修改后需要重启 service sshd restart
    • PubkeyAuthentication yes
name: deploy # Actions名称
on: 
  push:
    branches:
      - master
      - main
    paths:
      - 'blog/**'
      - '.github/**'
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@master # git pull, 第三方的actions
      - name: use node.js
        uses: actions/setup-node@v1
        with:
          node-version: 14
      - name: print version
        run: |
          node -v
          npm -v
    # 安装依赖
      - name: install
        run: npm install
      - name: build project
        run: npm run build
      - name: Deploy 
        uses: easingthemes/ssh-deploy@v2.0.7
        env:
            SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
            ARGS: "-rltgoDzvO --delete"
            SOURCE: "build/"
            REMOTE_HOST: "IP"
            REMOTE_USER: "root"
            TARGET: "/liu/目标文件夹/build"

参考issue ：https://github.com/easingthemes/ssh-deploy/issues/37

nvm​

  • nvm use、install等命令无效，或者执行不起效，重装也不起效的。后面发现是因为被360拦截了环境变量的更改，关闭以后重装生效
  • nvm use xxx 提示成功，但实际上却还是原来的版本。找到nvm按照路径，如C:\Users\dell\AppData\Roaming\nvm，把当前使用的版本重命名一下，（要改回去，再nvm use一下），再使用nvm use 切换就可成功
  • 可能被360拦截
  • 主要是不同项目使用npm install因为node版本差异，导致有些包安装异常使得项目无法运行，使用nvm切换对应版本按照好依赖包后，即可
# settings.txt
root: C:\Users\dell\AppData\Roaming\nvm
path: C:\Program Files\nodejs
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

vscode​

  • rm -rf 等 无法执行，提示无法加载文件 ******.ps1，因为在此系统中禁止执行脚本。有关详细信息，请参阅 "get-help about_signing"。 执行：set-ExecutionPolicy RemoteSigned 即可
  • 在vscode中，有些文件我们并不想看到，可以隐藏它们。例如如果我要隐藏所有xxx.webloc为后缀的文件，只需要在Settings中搜索files.exclude，然后添加模式，输入**/*.meta。

eslint​

const img = require('./assets/logo.png') //eslint-disable-line

const App = defineComponent({
  render() {
    return h('div', { id: 'app' }, [
      h('img', { alt: 'xxx', src: img }),   //使用require引入
    ])
  },
})

git​

#拉取最新代码，覆盖本地
git fetch --all
git reset --hard origin/dev
git pull

#创建并切换分支
git checkout -b mybranch

#拉取新代码后，切换分支后要和新代码合并
git pull
git checkout znyy1.0
git merge master
#合并以后再提交or开发
#查看当前登录邮箱：
git config user.email
 
#修改当前项目用户名和邮箱：
git config user.name "liuzhifeng" 
git config user.email "liuzhifeng@"

wepy​

  • npm install -g wepy-cli@1.7.0
  • wepy小程序的scroll-view 需要加高度，scroll-top和scroll才会生效，而且高度不能大于内容高度，否则不起效！
<scroll-view style="height: 1000px;" scroll-top="{{scrollTop}}" @scroll="scroll" scroll-with-animation="true" scroll-y="true" 
</scroll-view>

数据修改，需要调用this.$apply() ，视图才会更新

小程序中 image标签 自带的懒加载 lazy-load 需要放在scroll-view标签里面

h5​

滚动回弹

-webkit-overflow-scrolling:touch

VantUI​

Cascader 级联选择：

异步加载选项问题，options指定好children，onChange时通过参数拿到对应下标再赋值给children

children: 'citys',

async onChange(e) {
    let res = await this.request(this.config.doctorSecound, {id:e.value}, "POST");
    this.departmentList[e.selectedOptions[0].index].children =  res.data
}

v-deep:

Vue 3 报 [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

//括号括起来
::v-deep(.van-cell-group--inset) {
    margin: 0 !important;
}

scss​

// lighten
// darken
$btnbg:-webkit-linear-gradient(left,lighten($appcolor, 20%), $appcolor);

排除最后一个元素

&:not(:last-child) {
    border-bottom: 1px solid #e8ebef;
}
.creater {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px;
  }

  .footer {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .center {
    flex: 1;
    height: 0px;
    overflow: auto;

    .edit {
      height: 320px;
  }
}
// 这里利用flex布局上中下，中间容器高度自适应，要设置overflow: auto;页面被缩小才会显示滚动条，否则内容会被挤压，且挤压后再滚动页面会有镂空的问题

元素使用 align-items center 和 overflow auto 之后，内容太多左边被遮挡

嵌套一层盒子

<div class="container">
    <div class="warp">
      <div class="row-warp" v-for="(item, index) in []" :key="index">
      </div>
    </div>
  </div>
.container {
  overflow: scroll;
  width: 100%;
  background: #f9fbff;
  display: flex;
}
.warp {
  border-radius: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #2c3443;
  padding: 38px 0;
}

iconfont渐变色​

color: transparent; /* 将iconfont的颜色改为透明 */
background-clip: text; /* 将背景图的绘画仅作用在文字上 */
background-image: -webkit-linear-gradient(left, lighten($appcolor, 10%), $appcolor);

图片转透明底​

https://www.aigei.com/bgremover

flex​

// 解决flex布局 justify-content: space-around;最后元素居左使用伪类解决方案
.wrap:after {
  content: " ";
  width: 45%; //这个宽度和子元素宽度一致
  height: 0;
  display: block;
}

图片403​

本地服务器请求外部服务器图片报错403

 <meta name="referrer" content="no-referrer">

jssdk​

需用到jssdk支持的api，在微信内需走授权，不走授权跳转的jssdk初始化会失败

elementUI​

一个页面内同时存在多个 el-table，需要加上 key，才不会导致异常错乱

El-tree 选中时样式

::v-deep .el-tree-node__content:hover {
   background-color: #ddd !important;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
   background-color: #ddd !important;
}

el-popover

<el-popover
      trigger="click"
      placement="bottom"
      v-model="popoverVisible"
      ref='elPopoverRef'
>
// ...
<slot/>
this.$refs.elPopoverRef.updatePopper();

在vue2中直接@click是不生效的，因为Radio 单选框没有提供这样的事件；但是加上.native修饰符后这就是原生事件了，因此点击事件会生效

<el-radio v-model="departmentType" label="2" @click.native="showDep">指定部门</el-radio>

表格内容限制高度

.el-table {
    .el-table__cell {
        .cell {
          padding: 10px;
          max-height: 80px;
          word-break: break-all;
          overflow: auto;
        }
      }
}

Echarts​

grid 是平面直角坐标系的，而仪表盘、饼图这种，是通过设置中心点位置的方式定位，radius 设置边距

在Echarts中，可以使用formatter属性来自定义数据项的显示方式。如果你想在tooltip中显示数据项的占比，可以使用以下方式：
tooltip: {
  trigger: 'item',
  formatter: '{b}: {c} ({d}%)'
},
series中：
label: {
  show: true,
  formatter: '{b}: {d}%'
},
其中，{b}表示数据项的名称，{c}表示数据项的值，{d}表示数据项的占比。使用这种方式，tooltip会显示数据项的名称、值和占比，

jsPlumb​

前端连线 https://zhuanlan.zhihu.com/p/41808577

其它​

setInterval(()=>{
    const children = document.getElementsByClassName('content__default')[0].children
    document.getElementsByClassName('readMore-wrapper')[0].style.display = 'none'
    if(children[children.length-1].style.display==''){
       Array.from(children).map(item=>{item.style.display = 'block';item.style.opacity=1});
    }
},2000)

blur​

因为上层的key绑定了同样的column.value，导致每次输入都会触发blur

<el-input
    v-if="column.edit"
    v-model="column.value"
    autosize
    type="textarea"
    v-focus
    @blur="editBlur(column)"
/>

vue​

导致 路由参数写法无法识别 /w/:id？

publicPath: isProd ? '/' : './'

nuxt项目 node v16

node-sass 和 sass-loader 冲突

使用：

"sass": "^1.26.5",
"sass-loader": "^8.0.2"

前端反编译​

npm install --global reverse-sourcemap

单个sourceMap文件反编译 reverse-sourcemap -o aaa -v app.9fbea7c7.js.map 将 app.9fbea7c7.js.map 反编译到 aaa 目录下

批量sourceMap反编译 reverse-sourcemap -o origin -v ./static/js 将 ./static/js目录下所有的 .js.map 类型的文件（递归）反编译到 origin 目录下面

计算页面停留时间​

class PageTracker {
    constructor() {
        this.pageTimers = {}; // 用于存储不同页面的计时器
        this.uploadInterval = 60000; // 上传时间间隔，单位为毫秒（这里设置为 1 分钟）
    }

    // 进入页面时开始计时
    enterPage(pageName) {
        if (!this.pageTimers[pageName]) {
            this.pageTimers[pageName] = new Date();
            this.startUploadTimer(pageName); // 开始上传计时器
        }
    }

    // 离开页面时停止计时，并返回停留时长
    leavePage(pageName) {
        if (this.pageTimers[pageName]) {
            const startTime = this.pageTimers[pageName];
            const endTime = new Date();
            const timeSpent = endTime - startTime; // 计算停留时长，单位为毫秒
            delete this.pageTimers[pageName]; // 删除计时器
            clearInterval(this.uploadTimers[pageName]); // 清除上传计时器
            return timeSpent;
        }
        return 0; // 如果没有进入过该页面，则返回 0
    }

    // 开始上传计时器
    startUploadTimer(pageName) {
        this.uploadTimers[pageName] = setInterval(() => {
            const timeSpent = this.leavePage(pageName);
            if (timeSpent > 0) {
                this.uploadTimeSpent(pageName, timeSpent);
            }
        }, this.uploadInterval);
    }

    // 上传停留时长到服务器
    uploadTimeSpent(pageName, timeSpent) {
        // 使用 fetch 或其他方法将停留时长上传到服务器
        fetch('/record-time-spent', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ pageName: pageName, timeSpent: timeSpent })
        });
    }
}

nuxt​

之前nuxt2项目启动不起来，可能是 sass 版本冲突，

"sass": "^1.26.5",

"sass-loader": "^8.0.2"

和 node版本问题 v16.17.0