鹿酒的博客

解决异常

2021/1/1 CSSJavaScriptVueTypeScriptNode

常见的异常与处理方法。

# CSS

# Javascript

# 使用SharedArrayBuffer报错

用之前最好看下这篇文章《跨域隔离的启用指南》 (opens new window)，可以在页面中搜索SharedArrayBuffer等关键字。

ReferenceError: SharedArrayBuffer is not defined

解决方法：在请求头中加上正确的header。

{
  "Cross-Origin-Opener-Policy": "same-origin",
  "Cross-Origin-Embedder-Policy": "require-corp",
}
1
2
3
4

添加 Headers 具体操作：

// 1.服务器端添加，express中：
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
// 2.vue（测试环境） vue.config.js 
module.exports = defineConfig({
    configureWebpack: {
    devServer: {
      onBeforeSetupMiddleware: ({ app }) => {
        app.use(
          "/node_modules/",
          express.static(path.resolve(__dirname, "node_modules"))
        );
        app.use((_, res, next) => {
          res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
          res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
          next();
        });
      },
    },
  },
})
// 3. vite（测试环境） vite.config.ts 使用plugins自定义服务端
export default defineConfig({
  plugins: [addHeadersPlugin()],
})
export default addHeadersPlugin = () => ({
  name: 'configure-server',
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      // 用来给本地支持 WSAM
      res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
      res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
      next()
    })
  }
})
// 4. 插件 coi-serviceworker 自动添加headers
// https://github.com/gzuidhof/coi-serviceworker
实测可用, YYDS 
其中，'dist/' 我放到了 public中 然后在index中直接引用（vite项目）

```shell
npm i --save coi-serviceworker
cp node_modules/coi-serviceworker/coi-serviceworker.js dist/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# Vue

# Vue DevTools没有亮起来

解决方法：Chrome打开扩展程序（chrome://extensions/），找到Vue.js devtools，点击详情，然后打开【允许访问文件网址】选项。

然后重新打开开发者工具即可。

# Vue DevTools按钮亮了 但是在本项目中无法使用

解决方法^NoUse：尝试在main.js中添加以下代码

const win: any = window
if(process.env.NODE_ENV === 'development'){
  if('__VUE_DEVTOOLS_GLOBAL_HOOK__' in win){
    win.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue==app
  }
}
1
2
3
4
5
6

# TypeScript

# process等node相关变量在ts中提示异常：找不到名称 “process”

解决方法：安装@types/node包

npm i --save-dev @types/node
1

# Node

# 说明

除了带^NoUse标记外的，均是已经验证过可用的。