vue3+vite 在已有项目集成mars3d

引入

  • 按照mars3d官网的环境要求和版本 下载依赖
  • 我本地环境是 node v20.x.x, npm v10.x.x,
  • vite依赖版本 “vite”: “5.3.2”,
  • “mars3d”: “~3.8.0”,
  • “mars3d-cesium”: “~1.120.0”,
  • 需要下载vite-plugin-mars3d
    在vue.config.js中引入
import { mars3dPlugin } from "vite-plugin-mars3d";  
//
plugins: [vue(), mars3dPlugin({ useStatic: false })]

问题: 本地运行正常,打包后报错

  • js内存溢出
  • 一定要让 node 安装的系统版本 x86,x64,32 和电脑的系统对应起来
修改build打包配置
  • 修改限制大小或打包命令
build: {
			// 输出路径
			outDir: path.join("./dist", "/"),
			// 小于此阈值的导入或引用资源将内联为 base64 编码, 以避免额外的http请求, 设置为 0, 可以完全禁用此项,
			assetsInlineLimit: 1024000,
			// 启动 / 禁用 CSS 代码拆分
			cssCodeSplit: true,
			// 构建后是否生成 soutrce map 文件
			sourcemap: false,
			// 自定义rollup-commonjs插件选项
			commonjsOptions: {
				include: /node_modules|packages/
			},
			// 静态资源文件生成的目录
			assetsDir: "assets",
			// 自定义底层的 Rollup 打包配置
			rollupOptions: {
				input: {
					index: path.resolve(__dirname, "index.html")
				},
				output: {
					chunkFileNames: "assets/js/[name]-[hash].js"
				}
			},
			// 当设置为 true, 构建后将会生成 manifest.json 文件
			manifest: false,
			// 用来指定是应用哪种混淆器 boolean | 'terser' | 'esbuild'
			// minify: "terser",
			// 设置为 false 可以禁用最小化混淆,或是用来指定是应用哪种混淆器 boolean | 'terser' | 'esbuild'
			minify: "esbuild",
			// 传递给 Terser 的更多 minify 选项
			// terserOptions: {
			// 	compress: {
			// 		drop_console: false, // 在生产环境移除console.log
			// 		drop_debugger: true // 在生产环境移除debugger
			// 	}
			// },
			// 传递给 Terser 的更多 minify 选项
			// terserOptions: {},
			// 设置为false 来禁用将构建好的文件写入磁盘
			write: true,
			// 默认情况下 若 outDir 在 root 目录下, 则 Vite 会在构建时清空该目录。
			emptyOutDir: true
		},

package.json 留存

"dependencies": {
		"@element-plus/icons-vue": "2.3.1",
		"@kjgl77/datav-vue3": "^1.7.3",
		"@layui/layer-vue": "^2.4.3",
		"@turf/turf": "^6.5.0",
		"@vueup/vue-quill": "1.2.0",
		"@vueuse/core": "10.11.0",
		"axios": "0.28.1",
		"echarts": "^5.4.3",
		"echarts-for-react": "^3.0.2",
		"echarts-gl": "^2.0.9",
		"echarts-liquidfill": "^3.1.0",
		"echarts-wordcloud": "^2.0.0",
		"element-plus": "2.7.6",
		"file-saver": "2.0.5",
		"font-awesome": "^4.7.0",
		"fuse.js": "6.6.2",
		"jquery": "^3.7.1",
		"js-cookie": "3.0.5",
		"jsencrypt": "3.3.2",
		"mars3d": "~3.8.0",
		"mars3d-cesium": "~1.120.0",
		"nprogress": "0.2.0",
		"pinia": "2.1.7",
		"protobufjs": "^7.3.3",
		"qs": "^6.13.0",
		"swiper": "^8.4.7",
		"terser": "^5.31.6",
		"velocity": "^0.7.3",
		"vue": "3.4.31",
		"vue-cropper": "1.1.1",
		"vue-router": "4.4.0",
		"vue3-seamless-scroll": "^2.0.1"
	},
	"devDependencies": {
		"@vitejs/plugin-vue": "5.0.5",
		"cross-env": "^7.0.3",
		"sass": "1.77.5",
		"unplugin-auto-import": "0.17.6",
		"unplugin-vue-setup-extend-plus": "1.0.1",
		"vite": "5.3.2",
		"vite-plugin-compression": "0.5.1",
		"vite-plugin-mars3d": "^4.1.1",
		"vite-plugin-svg-icons": "2.0.1"
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值