标签：vue vuecli3 cesiumContainer Cesium new cesium path 搭建

一、vue-cli3+cesium搭建步骤

1、vue create 'your project-name' 新建你的项目

2、安装cesium依赖 npm install cesium --save

3、新建cesiumContainer.vue文件，src/views/cesiumContainer.vue

<template>
    <div id="cesiumContainer"></div>
</template>

<script>
  // 哪个组件需要 在哪里引入 也可以在main.js全局引入
  /*
  全局：
    import Cesium from 'cesium/Cesium' 
    // noinspection ES6UnusedImports
      import widget from 'cesium/Widgets/widgets.css'
      在全局的mounted阶段：
      this.$nextTick(() => {
      let viewer = new Cesium.Viewer('cesiumContainer')
    })
  */

  // 局部组件引用
  import Cesium from 'cesium/Cesium' 
  // noinspection ES6UnusedImports
  import widget from 'cesium/Widgets/widgets.css'
  export default {
    name: "cesiumContainer",
    mounted () {
      this.$nextTick(() => {
        this.cesiumInit()
      })
    },
    methods: {
      cesiumInit(){
        let viewer = new Cesium.Viewer('cesiumContainer');
      }
   }
 }
</script>

4、在router.js配置cesiumContainer组件路由

export default new Router({
  routes: [
    {
      path: '/',
      name: 'CComponent',
      component: () => import(/* webpackChunkName: "cesiumContainer" */ './views/cesiumContainer.vue')
    }
  ]
})

5、在App.vue使用全局样式

html, body, #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

6、最后一步配置：新建vue.config.js文件进行配置（和vuecli2差不多，但是vuecli3在一个文件中配置即可）

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
  publicPath: './',
  devServer: {
    port: 8080
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' ' // 1
    },
    amd: { // 2
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource) // 3
      }
    },
    plugins: [ // 4
      new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers'}]),
      new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets'}]),
      new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets'}]),
      new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers'}]),
      new webpack.DefinePlugin({ // 5
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false // 6
    }
  }
}

经过以上步骤即可完成vuecli3+cesium初始化

 cesium官网学习使用：

 原文链接：https://blog.csdn.net/weixin_44402694/article/details/88028155

标签：vue,vuecli3,cesiumContainer,Cesium,new,cesium,path,搭建
来源： https://www.cnblogs.com/AdamFamily/p/16583661.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。