[JavaScript知识库]vue+cesium 初探 之vue环境配置

vue+cesium初探 之vue环境配置

1.创建vue项目

vue create cesium_dome

2.然后引入cesium

npm i cesium --save

3.在项目目录下新建vue.config.js，配置如下(没有就自己在项目根目录创建一个)

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
 
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
 
module.exports = {
  // 基本路径  3.6之前的版本时 baseUrl
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 8088,
    https: false,
    hotOnly: false
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [
      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({
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false
    }
  }
};

4.配置main.js全局引入cesium相关文件

//引入cesium相关文件
var cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');

Vue.prototype.cesium = cesium
Vue.prototype.widgets = widgets

 // 如果vue.config.js中不配置别名，就要用下面的方式按路径引入
// var cesium = require('cesium/Build/Cesium/Cesium.js');
// var widgets = require('cesium/Build/Cesium/Widgets/widgets.css');

5.创建个map.vue

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
 
<script>
export default {
  name: 'Home',
  mounted(){
    this.init()
  },
  methods: {
    init() {
      let Cesium = this.cesium
      let viewer = new Cesium.Viewer('cesiumContainer');
      viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
    }
  }
};
</script>
 
<style lang='scss' scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
} 
</style>

6.启动会出现以下问题 ，即解决 in ./node_modules/cesium/Source/ThirdParty/zip.js 报错问题
或
由于在 ./node_modules/cesium/Source/ThirdParty/zip.js 文件中使用了 import.meta 语法，webpack 默认不支持，在进行项目构建时，会报如下错误，提示信息需要添加 loader。

7.接下来我们安装 loader

npm install @open-wc/webpack-import-meta-loader --save-dev

yarn add @open-wc/webpack-import-meta-loader --dev

8.然后在vue.config.js中添加(在plugins[…]后面)

module: {
      rules: [
      {
      test: /\.js$/,
      use: {
      loader: '@open-wc/webpack-import-meta-loader',
      },
      },
    ]}

9.最后在重新运行 npm run serve

成功啦！！！