月份:2021年10月

前端通过meta设置各种模式等

<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent ) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

整理解决node-sass依赖错误的问题

最近因为某些原因,MAC系统重装了,然后运行老项目时,出现了各种水土不服的问题,花了不少时间解决,特此记录。

解决方案:查看自己的node版本是否过高,node-sass@4.x.x系列的依赖在过高版本的node下不能顺利运行的。我是通过n控制node版本,降低node@v10.24.1得以解决。

因为习惯使用CNPM淘宝源来进行依赖安装,即cnpm i,发现老项目老是报错:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`

网上搜索后,很多人说是通过淘宝源解决,但我尝试后问题依旧,不过我已经锁定是node-sass的版本问题。

故尝试了cnpm i,翻墙 npm i,或者设置

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

以上都没有效果。

也自己尝试删除package.json中的

"node-sass": "^4.8.3",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",

然后重新cnpm i node-sass sass-loader style-loader -D,依赖倒是都可以安装上了,但运行npm run dev时,会报错:

Module build failed: TypeError: this.getOptions is not a function
或者
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string。

然后解决方案搜索后,说是node-sass版本太高了,因为这时自动加载的node-sass已经到了6.0.1还是多少。
后来想到,可能是node的版本问题,所以查了下NODE版本,

node-v16.10.0

确实太高了,已经接近最新版本,估计node-sass@4.8.3依赖和node版本之间的问题了。

随即,安装n来控制node多版本,安装node 10系列的版本

root@zhujindeMacBook-Pro ~ # n list
node/16.10.0
root@zhujindeMacBook-Pro ~ # n 10
  installing : node-v10.24.1
       mkdir : /usr/local/n/versions/node/10.24.1
       fetch : https://nodejs.org/dist/v10.24.1/node-v10.24.1-darwin-x64.tar.xz
   installed : v10.24.1 (with npm 6.14.12)
root@zhujindeMacBook-Pro ~ # n
   installed : v10.24.1 (with npm 6.14.12)
root@zhujindeMacBook-Pro ~ # node -v
v10.24.1

之后回到项目,删除node_modules,重新运行cnpm i,问题解决。