WebAssembly问题
以下包编译报错，
@icr/polyseg-wasm/dist/ICRPolySeg.wasm
原因是无法直接处理需要使用wasm-loader
wasm-loader 如何在vue.config.js中配置
在 Vue CLI 项目中配置 `wasm-loader` 以处理 WebAssembly (`.wasm`) 文件，你需要通过 Vue CLI 的 `configureWebpack` 或 `chainWebpack` 选项来修改 Webpack 配置。由于 `wasm-loader` 是一个 Webpack loader，它可以直接在 Webpack 配置中使用，而不需要像 Vite 插件那样特殊处理。
下面是一个如何在 `vue.config.js` 中配置 `wasm-loader` 的示例：
### 使用 `chainWebpack`
`chainWebpack` 提供了链式操作的方式来修改默认的 Webpack 配置，这种方式比直接修改 `configureWebpack` 中的对象更加灵活和强大。
```javascript
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
// 其他配置...
chainWebpack: config => {
// 添加一个针对 .wasm 文件的规则
config.module
.rule('wasm')
.test(/\.wasm$/)
.type('javascript/auto') // 或者使用 'webassembly/experimental' 如果你的 webpack 版本支持
.use('wasm-loader')
.loader('wasm-loader')
.options({ /* wasm-loader 的选项，如果有的话 */ })
.end();
},
// 注意：不需要在 plugins 数组中添加 wasm-loader，因为它是通过 loader 的方式使用的
});
```
在这个配置中，我们为 `.wasm` 文件创建了一个新的模块规则，并指定了 `wasm-loader` 作为处理这些文件的 loader。`wasm-loader` 会将 WebAssembly 文件转换为 JavaScript 模块，以便在浏览器中或通过 Node.js 导入和使用。
### 使用 `configureWebpack`
如果你更倾向于直接修改 Webpack 配置对象，可以使用 `configureWebpack` 选项。但是，请注意，这种方式不如 `chainWebpack` 灵活，因为它会合并你的配置对象到默认的 Webpack 配置中，而不是链式地修改它。
```javascript
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
// 其他配置...
configureWebpack: {
module: {
rules: [
{
test: /\.wasm$/,
type: 'javascript/auto', // 或者使用 'webassembly/experimental'
use: {
loader: 'wasm-loader',
options: { /* wasm-loader 的选项，如果有的话 */ }
}
}
]
}
},
// 注意：同样不需要在 plugins 数组中添加 wasm-loader
});
```
在这两种情况下，你都需要确保已经安装了 `wasm-loader`。如果还没有安装，可以通过 npm 或 yarn 来安装它：
```bash
npm install wasm-loader --save-dev
# 或者
yarn add wasm-loader --dev
```
另外，请注意 `type: 'javascript/auto'` 的使用，这是告诉 Webpack 使用自动的解析机制来处理模块。对于较新版本的 Webpack，你也可以尝试使用 `type: 'webassembly/experimental'`（如果可用），但这取决于你的 Webpack 版本和配置。不过，`javascript/auto` 通常是一个安全的选择，因为它会尝试根据文件内容自动选择最合适的解析机制。
************************************************************
本地开发使用的vue.config.js内容如下，编译通过：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// transpileDependencies: false,
publicPath: './',
lintOnSave: true,
// publicPath: '/MPR/',
outputDir: 'MPR',
assetsDir: 'static',
indexPath: 'index.html',
devServer: {
host: '0.0.0.0',
port: 7777,
// 使用代理解决跨域问题
proxy: {
// '/operationstat': {
// target: 'http://152.136.147.18/operationstat',
// changeOrigin: true,
// pathRewrite: {
// "^/operationstat": '/'
// }
// }
// '/api': {
// target: 'http://172.18.112.244:8081',
// // target: 'http://172.18.112.237:8080',
// // pathRewrite: {
// // '^/mobileDcm': '/'
// // }
// },
// '/mobileDcm': {
// target: 'http://172.18.112.244:8081',
// // target: 'http://172.18.112.237:8080',
// pathRewrite: {
// '^/mobileDcm': '/'
// }
// },
'/': {
ws: false,
// target: 'http://192.168.192.2:9006',
// target: 'http://172.16.115.129:9006',
// target: 'http://172.18.112.13:8080',
// target:'http://49.232.128.97:8081'
target: 'http://172.18.112.244:8081',
// target: 'http://172.18.112.237:8080'
}
},
headers: { //为每个请求添加自定义头
"Cross-Origin-Opener-Policy": "same-origin",//保护源站免受攻击
"Cross-Origin-Embedder-Policy": "require-corp"//保护源站免受侵害
}
},
// 其他配置项
configureWebpack: {
// 这里通常用于直接修改 webpack 配置对象
// 但对于链式操作，我们更倾向于使用 chainWebpack
experiments: {
syncWebAssembly: true,
asyncWebAssembly: true,
}
},
chainWebpack: config => {
// 自定义 wasm 文件的处理
config.module
.rule('wasm')
.test(/\.wasm$/)
.type('javascript/auto') // 或者使用 'webassembly/experimental' 如果你的 webpack 版本支持
.use('wasm-loader')
.loader('wasm-loader')
.options({ /* wasm-loader 的选项，如果有的话 */ })
.end();
},
})
