Vue3问题总结

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

vue3+vue-router4在使用过程中，通过composition api watch对router对象进行监听时，会出现这个问题。

import { useRoute } from 'vue-router'
const route = useRoute()
watch(
      route,
      (to, from) => {
        // do something
      }
    )

解决办法，别监听整个router对象，改为监听其某个属性，如监听path的变化就可以了。

Uncaught (in promise) DOMException: Failed to read the 'value' property from 'SVGLength': Could not resolve relative length.

项目中用到了svg，同时做了svg根据主题色进行换色处理的功能(监听了路由的变化去处理)，打包部署后出现这个问题，解决办法如第一个。

Incompatibile SockJS! Main site uses: "1.1.5", the iframe: "1.5.0"

由于项目中有一个消息管理中心的功能，基于websocket去实现的。项目中使用到了sockjs-client、stompjs这两个插件来实现这块的功能。后续发现项目部署到预发布、线上环境就报了这个错误。

因为项目是使用了ant-design-vueUI组件库，其对版本及组件的热更新是通过websocket去实现的。nginx需要配置对其的支持。

解决方法如下(通过nginx进行配置)：

server {
    listen       80;
    server_name  example.com;
    charset utf-8;
    location /websocket/ {
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
           proxy_pass http://127.0.0.1:3000;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_connect_timeout 60;
           proxy_read_timeout 600;
       proxy_send_timeout 600;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

关键配置：

• location /websocket/：配置拦截的websocket路径，根据请求的url前缀调整。
• proxy_http_version 1.1：websocket是在http1.1上扩展的。
• proxy_set_header Upgrade $http_upgrade 和proxy_set_header
• Connection "upgrade"：告诉nginx升级协议为websocket

Vue3.x 使用scss报错

在Vue3.x中，如果想要使用scss。需进行以下操作：

1. vue add style-resources-loader
2. yarn add node-sass sass-loader -D或npm i node-sass sass-loader --save-dev

这时候需要注意node-sass及sass-loader的版本问题，默认最高版本会报错，需降级版本处理。

"node-sass": "^4.14.1",
"sass-loader": "^7.0.3",

使用ace-builds遇到光标错乱

主要是因为设置的全局字体font-size: 14px影响到了ace-builds插件中光标的字体大小，将全局字体font-size设置为12px或者去掉全局字体即可解决该问题。