疑难杂症

TS2786 'Component' cannot be used as a JSX component

解决办法是在package.json中加入下面代码，来指定版本

"resolutions": {
    "@types/react": "17.0.40"
},

参考： https://juejin.cn/post/7089463577634930718 感谢这个老板

Vue配置less报错

用@vue/cli 4.1.1创建的项目配置less时启动项目就报错。差不多长这样：

ERROR  Failed to compile with 1 errors                                                      14:35:04

 error  in ./src/assets/style/index.less

Module build failed:

// load the styles
var content = require("!!../../../node_modules/css-loader/index.js?{\"minimize\":false,\"sourceMap\":
false}!../../../node_modules/less-loader/dist/cjs.js?{\"sourceMap\":false}!./index.less");
          ^
Unrecognised input
      in /Users/yungcho/myWork/vo_reconstraction_front/src/assets/style/index.less (line 4, column 12)

 @ ./src/assets/style/index.less 4:14-285 18:2-22:4 19:20-291
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

明明按照官网写的：

npm install -D less less-loader

// webpack.config.js -> module.rules
{
  test: /\.less$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'less-loader'
  ]
}

一查还不是我一个人有问题。发现有个哥们写的 说是vue已经配置了less的处理，因此有配置冲突。虽然我没有像他那样写在webpack.base.conf.js里了，而是根目录下新建了个vue.config.js来配置，猜想会不会是这个原因？删掉这个文件，重启，可以了，我靠，这不坑爹麽。我之前把这个文件里的内容都注释掉了也不行来着，还非得删除掉文件才行？

干掉eslint

懒得去配规则可以直接在文件开头写上 /* eslint-disable */，就不会检查这个文件了。

iconfont使用

当要在项目中加图标的时候得重新去官网下打包好的项目文件然后替换字体文件，但是不能只替换字体文件，iconfont.css里的base64那条也要拿过来，否则不能显示

关于Vue中scoped

加了scoped后，会给每个dom元素都加上一个data-v-2344b5f4这样子的属性。目的是为了避免css全局污染。这里记录一个问题，跟预期的相反。

有如下代码 Test.vue：

<template>
  <div>
    <div class="container">
      Test.vue
    </div>
    <test-a></test-a>
  </div>
</template>
........
<style scoped>
  .container {
    color: red;
  }
</style>

还有一个组件 TestA.vue 没写样式

<template>
  <div class="container">
    testA
  </div>
</template>
<style scoped>

</style>

最后的结果是testA是红色的。不是说好的不影响别的组件麽。

<div data-v-2344b5f4>
    <div data-v-2344b5f4 class="container"> Test.vue </div>
    <div data-v-36291dea data-v-2344b5f4 class="container"> testA </div>
</div>

Test.vue的每一个标签上都加了data-v-2344b5f4的属性，然后通过这个来控制css

.container[data-v-2344b5f4] {
  color: red;
}

由于testA的class也是container，并且也有data-v-2344b5f4这个属性，自然就被应用到了这个样式。

看了下官网，有这么一段话，算是解释了。

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。

Google Cloud Platform 部署问题

部署会出现的问题：node app.js后无法访问站点，是防火墙的问题

先去后台添加规则：https://233blog.com/post/30/

firewall-cmd --list-ports 查看端口

firewall-cmd --zone=public --add-port=端口/tcp --permanent 打开端口

firewall-cmd --reload 重启防火墙

https://segmentfault.com/q/1010000013903866

acme.sh 生成证书

https://github.com/acmesh-official/acme.sh

下载

curl https://get.acme.sh | sh

生成证书，这一步如果提示没有acme.sh这个命令，就自行添加alias：acme.sh=~/.acme.sh/acme.sh。nginx的情况：

acme.sh --issue -d example.com --nginx

安装证书，使用nginx的话：

acme.sh --install-cert -d example.com

正常来说，这样就可以了。

注意：

• 在生成证书这一步的时候，他貌似是会检查nginx.conf文件的，里面要有

  server_name example.com

  的配置，不然他会提示找不到配置。

  等到证书成功生成了，然后再添加https的配置。重新加载配置。

• nginx.conf的user配置要注释掉，不然会提示权限问题之类的，搞不太懂，我直接注释了就通过了

• 最好直接用root进行整个过程，为了避免一些权限问题。而且acme.sh是不能用sudo执行的。

• 如果成功生成，会在~/.acme.sh目录下生成example.com的文件夹，里面有配置https要用的。

  server {
          listen 443 ssl;
          server_name example.com;
          ssl_certificate /root/.acme.sh/example.com/example.com.cer;
          ssl_certificate_key /root/.acme.sh/example.com/example.com.key;
          location / {
              proxy_pass	http://127.0.0.1:3000;
          }
  
          ssl_session_cache shared:SSL:1m;
          ssl_session_timeout  5m;
  
          error_page 404 /404.html;
              location = /40x.html {
          }
  
          error_page 500 502 503 504 /50x.html;
              location = /50x.html {
          }
      }

  ssl_certificate通常是写pem文件的路径，但是没有找到pem，看到说cer和pem是同一个东西来着。

  如果要http也跳转到https：

  server {
          listen       80;
          listen       [::]:80;
          server_name  kaeru.yuijam.live;
          return 301 https://$server_name$request_uri;
      }