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>