vue2引用mxcad

https://www.mxdraw3d.com/mxcad_docs/zh/1.%E5%BC%80%E5%A7%8B/1.%E7%AE%80%E4%BB%8B.html
这是官方文档

需要将.dwg 文件转成 .mxweb格式的

文档中有介绍
https://www.mxdraw3d.com/mxcad_docs/zh/1.%E5%BC%80%E5%A7%8B/3.%E5%9B%BE%E7%BA%B8%E8%BD%AC%E6%8D%A2.html

修改配置文件

'use strict'
const path = require('path')
// const { defineConfig } = require('@vue/cli-service')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const CompressionPlugin = require('compression-webpack-plugin')

const name = process.env.VUE_APP_TITLE || '管理系统' // 网页标题

// const port = process.env.port || process.env.npm_config_port || 80 // 端口
const port = 8081 // 端口

const CopyWebpackPlugin = require("copy-webpack-plugin");

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
  transpileDependencies: ['mxcad'],
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.hj.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.hj.vip/admin/，则设置 baseUrl 为 /admin/。
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'static',
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // lintOnSave: false,
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  filenameHashing: true, // 添加这一行来启用文件名哈希
  // webpack-dev-server 相关配置
  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8790`, 
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '',
        },
      },
      '/file': {
        target: `http://42.193.117.96/`,
        secure: false,
        pathRewrite: {
          // 请求路径重写
          '/file': '/file', //重写请求路径
        },
      },
    },
    disableHostCheck: true,
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: 'expanded' },
        additionalData: `@import "~@/assets/styles/pxtovw.scss";`,
      },
      scss: {
        sassOptions: { outputStyle: 'expanded' },
        additionalData: `@import "~@/assets/styles/pxtovw.scss";`,
      },
    },
  },
  configureWebpack: {
    name: name,
    devtool: 'cheap-module-source-map',
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    plugins: [
      new CompressionPlugin({
        cache: false, // 不启用文件缓存
        test: /\.(js|css|html)?$/i, // 压缩文件格式
        filename: '[path].gz[query]', // 压缩后的文件名
        algorithm: 'gzip', // 使用gzip压缩
        minRatio: 0.8, // 压缩率小于1才会压缩
      }),
      new CopyWebpackPlugin([
        // 拷贝mxcad wasm 相关的核心代码 mxcad默认请求的路径是 /* 所有 需要把文件放dist2d下
        {
          from: "node_modules/mxcad/dist/wasm/2d-st/*",
          to: path.resolve(__dirname, "dist"),
          flatten: true
        },
        // 必须要字体文件来显示图纸中的文字，mxcad库默认请求URL路径为 /fonts/* 所有需要放在dist/fonts下
        {
          from: "node_modules/mxcad/dist/fonts",
          to: path.resolve(__dirname, "dist/fonts"),
          flatten: true,
          toType: "dir"
        },
        // 这里拷贝的是转换后的图纸文件 对应在src/index.js中 `mxcadObj.openWebFile("test2.mxweb")`
        // 这只是转换后的测试图纸文件 你应该转换自己的图纸文件
        // {
        //   from: "/public/某小区高层住宅楼电气图纸.dwg.mxweb",
        //   to: path.resolve(__dirname, "dist"),
        //   flatten: true
        // }
      ]),
    ],
    externals: {
      WSPlayer: 'WSPlayer',
      jquery: 'jQuery',
      // jQuery: 'jQuery',
      // YSClass: 'YSClass',
      // YSWebPlugin: 'YSWebPlugin',
      // YSutils: 'YSutils',
      // YSWndControl: 'YSWndControl',
      // YSSDKControl: 'YSSDKControl',
      YSIndex: 'YSIndex',
    },
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end()

    config.module
      .rule('pdf')
      .test(/\.pdf$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10000,
        name: 'assets/[name].[hash:8].[ext]'
      })

    config.module
      .rule('dwg')
      .test(/\.dwg$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10000,
        name: 'assets/[name].[hash:8].[ext]'
      })

    config.module
      .rule('mxweb')
      .test(/\.mxweb$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10000,
        name: 'assets/[name].[hash:8].[ext]'
      })

    config.when(process.env.NODE_ENV !== 'development', (config) => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /runtime\..*\.js$/,
          },
        ])
        .end()

      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial', // 仅打包最初依赖的第三方
          },
          elementUI: {
            name: 'chunk-elementUI', // 单独打包 elementUI
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, // 最小共用次数
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      })
      config.optimization.runtimeChunk('single', {
        from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
        to: './', //到根目录下
      })
    })
  },
}

我是将node_modules中的文件copy到static下了

<template>
  <el-dialog
    v-show="open"
    class="config-dialog dialog-box fullscreen"
    :lock-scroll="false"
    :append-to-body="true"
    :modal-append-to-body="true"
    title="查看"
    :visible.sync="open"
    :fullscreen="true"
    width="1920"
    @close="dialogClose">
    <div>
      <div class="content" style="padding: 10px; height: 960px; overflow: hidden;">
        <canvas id="myCanvas" style="height: 960px; width: 1800px"></canvas>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="danger" size="mini" @click="dialogClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createMxCad } from "mxcad"

export default {
  name: 'CadPreview',
  data() {
    return {
      open: false,
      form: {},
      pdfSrc: require('@/assets/水产价格监测.pdf')
    }
  },
  props: { 
  },
  mounted() {},
  computed: {
  },
  methods: {
    /** 打开弹窗 */
    async openDialog(data) {
      this.form = {...data}
      createMxCad({
        canvas: "#myCanvas",
        // locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/2d/${fileName}`, import.meta.url).href,
        fontspath: "/static/mxcad/dist/fonts",
        locateFile: (fileName) =>'/static/mxcad/dist/wasm/2d-st/' + fileName,
        // fileUrl: require('@/assets/某小区高层住宅楼电气图纸.dwg.mxweb'),
        fileUrl: '/file/template.dwg.mxweb'
      }).then((mxcad) => {
        console.log(mxcad)
        
      })
      this.open = true
    },
    /** 关闭弹窗 */
    dialogClose() {
      this.open = false
    },
    /** 提交表单 */
    submitForm() {
     
    },
  },
}
</script>

<style scoped lang="scss">
.model-container {
  flex: 1;
  background-color: #fff;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  .content {
    width: 1900px;
    margin: auto;
    .desc-content {
      .name {
        text-align: center;
        font-size: 18px;
        color: #1c2342;
        line-height: 25px;
        font-weight: bold;
        margin: 20px 0;
      }

      .img-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        ::v-deep.el-carousel {
          width: 400px;
          height: 200px;
          .el-carousel__container {
            height: 100%;
          }

          //分页器
          .el-carousel__indicators {
            .el-carousel__indicator button {
              width: 6px;
              height: 6px;
              border-radius: 50%;
              opacity: 1;
            }
            .el-carousel__indicator.is-active button {
              background: rgba(27, 91, 255, 0.6);
            }
          }
        }
        .img {
          width: 400px;
          height: 200px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            object-fit: cover;
          }
        }
      }

      ::v-deep.message-wrapper {
        .el-descriptions-item__label {
          &.is-bordered-label {
            width: 88px;
            background-color: #f9fbff;

            font-size: 14px;
            font-weight: 400;
            color: #757888;
            line-height: 22px;
          }
        }

        .el-descriptions-item__content {
          width: 212px;
        }
      }
    }
  }

  .no-img-data {
    width: 200px;
    height: 200px;
    text-align: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

::v-deep .el-dialog__body {
  max-height: 1000px;
  overflow: auto;
}
</style>

可以显示了