Vue2项目使用mars3d

vue2中使用mars3d

1. npm 下载安装
2.修改vue的main.js
3.安装copy-webpack-plugin

1. npm 下载安装

//安装mars3d主库
npm install mars3d --save   //安装mars3d插件（按需安装）
npm install mars3d-space --save

2.修改vue的main.js

import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
import * as Cesium from "mars3d-cesium" //如果案例中有用到cesiusm//导入mars3d插件（按需使用，需要先npm install）
import 'mars3d-space'//可以绑定下vue原型链，可以全局使用    或者直接绑定在window上
Vue.prototype.mars3d = mars3d;window.mars3d= mars3d
window.Cesium = Cesium //如果案例中有用到cesiusm

3.安装copy-webpack-plugin

npm install copy-webpack-plugin -save --dev

// vue.config.js 添加下面配置
const CopyWebpackPlugin = require('copy-webpack-plugin')  module.exports = {configureWebpack: config => { let cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' //cesium库目录let cesiumRunPath = config.output.publicPath || './cesium/' //cesium运行时主目录let plugins = [//标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify(cesiumRunPath)}),//cesium相关资源目录需要拷贝到系统目录下面new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(cesiumRunPath, 'Workers') }]),new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(cesiumRunPath, 'Assets') }]),new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(cesiumRunPath, 'ThirdParty') }]),new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(cesiumRunPath, 'Widgets') }])]return {plugins: plugins}},//已忽略其他配置
}

或参考webpack.config.js写法进行修改

// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')const cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' //cesium库目录
let cesiumRunPath = './cesium/'//cesium运行时主目录module.exports = {plugins: [//标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify(cesiumRunPath)}),//cesium相关资源目录需要拷贝到系统目录下面new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(cesiumRunPath, 'Workers') }]),new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(cesiumRunPath, 'Assets') }]),new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(cesiumRunPath, 'ThirdParty') }]),new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(cesiumRunPath, 'Widgets') }])],
}

Vue2项目使用mars3d相关推荐

超级详细的手写webpack4配置来启动vue2项目（附配置作用）
基础目录结构以及各个文件的作用初始npm项目 npm init 一路回车,一律使用默认的npm项目配置 package.json修改scripts 如下: {"name": &q ...
使用 Vue3 重构 Vue2 项目(长文)
前言 2020年9月18日,vue3正式版发布了,前几天把文档整体读了一遍,感触很深,可以解决我项目中的一些痛点,于是就决定重构之前那个vue2的开源项目. 本篇文章就记录下重构vue2项目的过程,欢 ...
前端Vue2项目开发常用依赖
前端Vue2项目开发常用依赖一.常用依赖 1.axios请求库 2.core-js 开源库zloirock/core-js 提供了es5.es6的polyfills,包括promises.symbo ...
vue2项目使用高德api内嵌地图，点标记+行政区分颜色
前言:公司想在vue2项目中嵌入海南省的地图,在地图上标记出一些地址信息,省内的县区等各个区块展示不同的颜色,需求不是很难. 官网:https://lbs.amap.com/api/jsapi-v2/ ...
Vue2项目引入vant报错问题解决export ‘isVNode‘ (imported as ‘isVNode‘)
首次使用vue2项目安装vant,在基本配置完成之后使用vant组件出现了如下错误: 报错原因:vue版本和vant版本不一致,我这里是vue 2安装了vant 3 版本解决方案: 步骤一:卸载va ...
分享一个比较完整的Vue2+项目供大家交流学习
分享一个比较完整的Vue2+项目供大家交流学习,这个项目的英文简介:Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + vue- ...
Vue2项目总结-电商后台管理系统
Vue2项目总结-电商后台管理系统去年做的项目,拖了很久,总算是打起精力去做这个项目的总结,并对Vue2的相关知识进行回顾与复习各个功能模块如果有过多重复冗杂的部分,将会抽取部分值得记录复习的地方 ...
Vue2 项目优化，压缩
Vue2项目的优化部署最近才把博客项目部署到服务器上去(沾灰多年的服务器终于派上用场了0 W 0),刚开始前端项目在build时就已经提示文件过大了,chunk-vendors文件上MB了,当时不以 ...
TS在vue2项目中的写法
作为对照,先回忆一下js在vue2项目中的写法 <script> export default{data(){return {}},methods:{},computed:{},filte ...
Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex）
Vite 先让我说几句废话. 在写本文时 Vite 没有提供 Vue2 的创建方式. 相信有些开发者还没开始学 Vue3,但又想尝尝 Vite.那可以参考本文的进食方式. 如果心急的话,"0 ...

Vue2项目使用mars3d

vue2中使用mars3d

1. npm 下载安装

2.修改vue的main.js

3.安装copy-webpack-plugin

Vue2项目使用mars3d相关推荐

最新文章

热门文章