Vue3 problem summary

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

This problem occurs when vue3+vue-router4 monitors the router object through composition api watch during use.

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

The solution is not to monitor the entire router object, but to monitor one of its properties, such as monitoring the changes of path .

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

SVG is used in the project, and at the same time, the function of svg to change color according to the theme color (monitoring the change of routing to process), this problem occurs after packaging and deployment, the solution is the first one.

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

Since there is a function of a message management center in the project, it is implemented based on websocket. The two plugins sockjs-client and stompjs are used in the project to realize this function. Later, it was found that this error was reported when the project was deployed to the pre-release and online environment.

Because the project uses the ant-design-vue UI component library, the hot update of the version and components is achieved through websocket . nginx needs to be configured to support it.

The solution is as follows (configured through 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;
    }
}

Key configuration:

• location /websocket/: Configure the intercepted websocket path and adjust it according to the requested url prefix.
• proxy_http_version 1.1: websocket is extended on http1.1.
• proxy_set_header Upgrade $http_upgrade and proxy_set_header
• Connection "upgrade": tell nginx to upgrade the protocol to websocket

Vue3.x uses scss to report an error

In Vue3.x, if you want to use scss. The following actions are required:

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

At this time, you need to pay attention to the version problems of node-sass and sass-loader . By default, the highest version will report an error, which needs to be downgraded.

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