Vue2项目使用mars3d-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue2项目使用mars3d。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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写法进行修改文章来源地址https://www.toymoban.com/news/detail-624722.html

// 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的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！