常见问题

# 常见问题

# --unsafe-perm

// npm 出于安全考虑不支持以 root 用户运行，即使你用 root 用户身份运行了，npm 会自动转成一个叫 nobody 的用户来运行，而这个用户几乎没有任何权限。
// 这样的话如果你脚本里有一些需要权限的操作，比如写文件（尤其是写 /root/.node-gyp），就会崩掉了。

// 为了避免这种情况
// 要么按照 npm 的规矩来，专门建一个用于运行 npm 的高权限用户；
// 要么加 --unsafe-perm 参数，这样就不会切换到 nobody 上，运行时是哪个用户就是哪个用户，即使是 root。

# IOS 右滑错误

// webApp IOS右滑错误

// IOS右滑返回上一级是切换上一个WebView,Vue打包的App只有一个WebView,所以返回上一级是空白页
// 必须在 plusready 中执行

document.addEventListener(
  "plusready",
  function () {
    // 禁止ios右滑返回(右滑显示空白页)
    plus.webview.currentWebview().setStyle({
      popGesture: "none",
    });
  },
  false
);

# node-sass 报错

# node-sass 安装过程

PS D:\demo> npm i node-sass

// 从npm源安装到node_modules
> node-sass@4.13.0 install D:\demo\node_modules\node-sass
> node scripts/install.js

// 下载binding.node
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/win32-x64-64_binding.node
Download complete .] - :
Binary saved to D:\demo\node_modules\node-sass\vendor\win32-x64-64\binding.node

// 缓存binding.node
Caching binary to C:\Users\leepi\AppData\Roaming\npm-cache\node-sass\4.13.0\win32-x64-64_binding.node

> node-sass@4.13.0 postinstall D:\demo\node_modules\node-sass
> node scripts/build.js

Binary found at D:\demo\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine

// 写package-lock.json
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN demo@1.0.0 No description
npm WARN demo@1.0.0 No repository field.

+ node-sass@4.13.0
added 174 packages from 138 contributors and audited 529 packages in 24.379s
found 0 vulnerabilities

安装 node-sass 有几个步骤:

校验本地 node_modules 中是否已安装 node-sass，版本是否一致;
如未安装或版本不符，从 npm 源安装 node-sass 本体;
检测全局缓存和本地中是否有 binding.node,如有即跳过安装;
没有 binding.node 则从 github 下载该二进制文件并将其缓存到全局;
假如 binding.node 下载失败，则尝试本地编译出该文件;
将版本信息写到 package-lock.json;

# 报错的几种原因

npm 源速度慢
binding.node 源无法访问或速度慢
node 版本与 node-sass 版本不兼容
缓存中 binding.node 版本不一致
编译失败,提示没有安装 python、build 失败等

# 解决方案

gyp 环境报错

// 安装 gyp 环境
npm install -g node-gyp

node-sass 安装失败

// 先删除原node-sass
npm uninstall node-sass

// 删除 node_modules 文件夹

// 在项目根目录内添加一个 .npmrc 文件，内容如下：
phantomjs_cdnurl=http://cnpmjs.org/downloads
sass_binary_site=https://registry.npmmirror.com/mirrors/node-sass/
registry=https://registry.npmmirror.com

// 重新安装依赖
npm install

// 重新安装 node-sass
npm install node-sass

参考文章 (opens new window)

# canvasToTempFilePath

在微信小程序中使用 canvas，如果涉及弹窗、定位，或者在 scroll-view 中，canvas 会出现一些 bug。官方提供的一种解决方法是将 canvas 转成图片使用。

wx.canvasToTempFilePath(Object object, Object this)

把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。

canvasToTempFilePath:fail canvas is empty

cavans 转图片 (opens new window)

/**
 * 使用 wx.canvasToTempFilePath() 方法可以将 canvas 绘制的图转成一张图片使用，避免了小程序上使用 canvas的一些坑。
 *
 * 使用时需注意：
 * 1. wx.canvasToTempFilePath() 需在 ctx.draw() 的回调方法中使用
 * 2. wx.canvasToTempFilePath() 在使用时如果在自定义组件中，需传递第二个参数，参数为当前组件对象 如：this
 */

// 在 cts.draw 回调中使用
ctx.draw(
  true,
  setTimeout(() => {
    // 延时器避免触发一些加载bug
    // 本次使用的是 Taro 框架 Taro.canvasToTempFilePath 同 wx.canvasToTempFilePath
    Taro.canvasToTempFilePath(
      {
        x: 0,
        y: 0,
        canvasId: "canvas", // canvas 标识
        success: function (res) {
          // success 成功回调
          console.log("canvasToTempFilePath", res); // res 为返回数据 成功时 res.tempFilePath 为图片临时地址 可直接使用
        },
        fail: function (res) {
          // 失败回调
          console.log(res);
        },
      },
      this.$scope // this -> Taro 中 this 指向存在问题，这里需使用 this.$scope
    );
  }, 500)
);

// 若提示 canvasToTempFilePath:fail canvas is empty ，需注意 this.$scope 处

参考微信开发者工具代码片段 (opens new window)

# vue3 this.$store 报错

Property '$store' does not exist on type 'ComponentPublicInstance' xxxxx

// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // Declare your own store states.
  interface State {
    count: number
  }

  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

# javascript 精度丢失

// javascript 精度丢失问题
// javascript 在数值运算时，若存在小数运算，会出现计算结果不准确的问题
0.1 + 0.2; // 0.30000000000000004
0.1 * 0.2; // 0.020000000000000004
// 因此在处理小数运算时，需先将小数转化为整数再执行运算

# vue `history`模式部署后刷新页面 404

(opens new window)

# nginx 配置
location / {
  root   html;
  try_files $uri $uri/ /index.html;
  index index.html index.htm;
}

# git ssh 登录时报远程主机标识已更改

$ ssh -T git@github.com
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the RSA key sent by the remote host is
SHA256: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
Please contact your system administrator.
Add correct host key in /c/Users/Administrator/.ssh/known_hosts to get rid of this message.
Offending RSA key in /c/Users/Administrator/.ssh/known_hosts:4
RSA host key for github.com has changed and you have requested strict checking.
Host key verification failed.

ssh 会把你每个你访问过计算机的公钥(public key)都记录在~/.ssh/known_hosts。当下次访问相同计算机时，OpenSSH 会核对公钥。如果公钥不同，OpenSSH 会发出警告，避免你受到 DNS Hijack 之类的攻击。

有以下两个解决方案：

手动删除修改 known_hsots 里面的内容；
修改配置文件 ~/.ssh/config，加上这两行，重启服务器。
StrictHostKeyChecking no
UserKnownHostsFile /dev/null

优缺点：

需要每次手动删除文件内容，一些自动化脚本的无法运行（在 SSH 登陆时失败），但是安全性高；
SSH 登陆时会忽略 known_hosts 的访问，但是安全性低；

代码片段 Airbnb JavaScript 风格指南

xiaoc的博客

Choose mode

常见问题

# 常见问题

# --unsafe-perm

# IOS 右滑错误

# node-sass 报错

# node-sass 安装过程

# 报错的几种原因

# 解决方案

# canvasToTempFilePath

# vue3 this.$store 报错

# javascript 精度丢失

# vue `history`模式部署后刷新页面 404

# git ssh 登录时报远程主机标识已更改

xiaoc的博客

常见问题

# 常见问题

# --unsafe-perm

# IOS 右滑错误

# node-sass 报错

# node-sass 安装过程

# 报错的几种原因

# 解决方案

# canvasToTempFilePath

# vue3 this.$store 报错

# javascript 精度丢失

# vue history模式部署后刷新页面 404

# git ssh 登录时报远程主机标识已更改

# vue `history`模式部署后刷新页面 404