创建vue3项目并集成cesium插件运行

创建vue3项目并集成cesium插件

一、vue项目创建

1、前期准备 node.js&npm或yarn 本地开发环境已经安装好。

参考安装

2、安装vue-cli，要求3以上版本

#先查看是否已经安装
vue -V

#安装
npm install -g @vue/cli@4.5.17

1）配置环境变量：确保系统环境变量中包含了 npm 全局路径。例如，D:\Program Files\nodejs\node_global 应该在你的 PATH 环境变量中。

否则报错：'vue' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

2）配置环境变量之后还报错：

比如：

权限错误：

以管理员身份运行 PowerShell：

• 右键单击开始菜单按钮，选择“Windows PowerShell (管理员)”或“命令提示符 (管理员)”。
• 确保你有足够的权限来修改系统设置。

 在 PowerShell 中运行以下命令来查看当前的执行策略：

Get-ExecutionPolicy

这会输出当前的执行策略，比如 Restricted，RemoteSigned，AllSigned，Unrestricted 等。

你可以将执行策略设置为 RemoteSigned 以允许运行本地脚本。运行以下命令：

Set-ExecutionPolicy RemoteSigned

 然后查看示例：Idea工具 页面 Terminal 窗口 安装查看

cmd 命令窗口 查看

3、如果版本不合适，协助重装

#查看版本
vue -V 

#全局卸载
npm uninstall -g vue-cli

4、创建项目

vue create  vue_cesium_project

示例图

 选择版本，Vue3，点击鼠标下键，然后回车

5、创建完成后进入项目目录

 6、启动项目

yarn serve

示例图

 两个访问地址

  # 自己访问的地址
  - Local:   http://localhost:8080/ 
  # 同网段别的电脑访问你服务器的地址
  - Network: http://192.168.1.2:8080/

访问结果

另外这些依赖和配置文件都是创建项目时下载的

 二、配置cesium地图插件

1、安装cesium插件依赖

#默认安装最新的
yarn add cesium

#卸载插件
yarn remove cesium

#安装指定版本的
yarn add cesium@1.96.0

#安装指定版本到测试环境
yarn add cesium@1.96.0 -D

安装成功

 配置文件变化

 cesium目录内容

Build文件夹是打包之后的Cesium库文件（压缩）。

Source文件夹是Cesium整个项目工程的重中之重，涉及到的所有类的源码和自定义shader（渲染）源码都存储在此文件夹里，可以通过阅读源码研究每个类、属性、方法及事件的实现原理。

node_modules 文件夹的目录结构通常是因为 Cesium 使用了 npm 或者其他类似的包管理工具来管理其依赖项和开发环境。

.husky 文件夹通常用于存放 Husky 工具的配置文件和钩子脚本。
.husky 文件夹用于配置 Git 钩子（Git hooks）和相关脚本。

Husky 是一个 Git 钩子工具，它可以让开发人员在 Git 操作的不同阶段执行自定义的脚本，比如在提交代码前执行代码格式化、Lint 检查、单元测试等操作。在 .husky 文件夹中通常会包含一些预定义的 Git 钩子脚本，比如 pre-commit、pre-push 等。开发人员可以根据需要自定义 Git 钩子脚本，并将其放置在 .husky 文件夹中相应的钩子文件中，例如 pre-commit 钩子脚本会在提交代码前执行。配置 Husky 工具的方式通常是在项目的 package.json 文件中添加相应的配置项，例如指定钩子脚本的路径和需要执行的命令等。

 2、卸载后安装指定版本

依赖自动删除

安装指定版本，去官网看看：Downloads – Cesium

找稳定版本方法：GitHub - CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

 

比如我们就按照1.99版本

 安装结果

如果安装到开发环境：

 会生成在这里。

整体package.json引用

{
  "name": "vue_cesium_1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "cesium": "1.96.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@open-wc/webpack-import-meta-loader": "^0.4.7",
    "@vue/cli-plugin-babel": "~4.5.17",
    "@vue/cli-plugin-eslint": "~4.5.17",
    "@vue/cli-service": "~4.5.17",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "strip-pragma-loader": "^1.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

 3、配置入口文件main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

申请令牌步骤：参考

如果不加令牌，也可以，只不过访问不到具体的地图数据。

注意：cesium类的引用问题

#正常情况
import Cesium from 'cesium/Build/Cesium/Cesium';

#非正常情况，容易报错，除非你加了其他配置
import Cesium from 'cesium/Cesium';

如果报错，是什么错误呢

This dependency was not found:

* cesium/Cesium in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!
./node_modules/vue-loader-v16/dist??ref--1-1!./src/App.vue?vue&type=script&lang=js

To install it, you can run: npm install --save cesium/Cesium

 大概是找不到cesium相关类。

vue.config.js 配置文件新增然后配置填写内容

// Vue 项目中引入 webpack 模块，以便对 webpack 构建配置进行自定义和扩展。
// webpack 是一个流行的 JavaScript 模块打包工具，Vue CLI 在底层使用 webpack 来进行项目的构建和打包。
const webpack = require('webpack')
const path = require('path')// 引入 Node.js 的 path 模块，以便在 Vue 项目中处理文件路径的操作。
const CopyWebpackPlugin = require('copy-webpack-plugin')// 引入 webpack 插件,以便在 Vue 项目中使用该插件来进行文件复制操作。
const cesiumSource = 'node_modules/cesium/Build/Cesium'// 指定 Cesium 库的源代码路径.

module.exports = { // 导出一个对象模块，可以在其他文件中使用 require 来引入这个模块。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
  publicPath: './', // 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')
  assetsDir: './static', // 当运行 vue-cli-service build 时生成的生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录  默认为"",默认与生成的index.html同级.
  productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建   这玩意设置成false之后，能把打包后的文件大小减小80%   当时我的项目大小是8m+  设成false之后变成了2m+     productionSourceMap:false,之后，就不会生成map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。
  // 1.是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
  // 2.设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
  // 3.如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。
  lintOnSave: false, // 是否开启eslint
  devServer: {
    open: true // 在启动开发服务器时自动打开浏览器
  }, // (config)：表示传入的参数，即 webpack 的配置对象，可以在这里进行对 webpack 的配置项进行修改和定制。
  configureWebpack: (config) => { // 表示在 webpack 配置中进行自定义配置。
      let plugins = []
      
      plugins = [// 配置了一个 webpack 的插件 DefinePlugin，用于定义环境变量 CESIUM_BASE_URL。
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('')// 是设置 Cesium 的基础 URL 为静态资源目录，以便在项目中正确加载和引用 Cesium 相关资源文件。
      }), // CopyWebpackPlugin 是 webpack 的一个插件，可以在 webpack 构建过程中复制文件或目录，通常用于处理静态资源文件的复制操作。
      // 将 cesiumSource 目录下的 Workers 目录中的所有文件复制到构建输出目录的 static/Workers 目录中。
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'Workers' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }])
    ]

    return {
      module: {
        unknownContextCritical: false, // 表示在 webpack 处理模块时，遇到未知的上下文时不会报错，即不会抛出错误。默认情况下，webpack 在遇到未知上下文时会抛出错误，这可能会导致构建失败。
        rules: [ // 定义了一组模块处理规则，包括对 JavaScript 文件的处理规则。
          {
            test: /\.js$/, // 指定匹配的文件类型为 .js 文件。
            enforce: 'pre', // 表示该 Loader 的执行优先级是最高的，会在其他 Loader 之前执行。
            // include 表示只对指定的目录或文件进行处理，其他目录或文件不会被处理。
            // 告诉 webpack 只对指定目录下的模块进行处理，这里指定的目录是 Cesium 库的源码目录。这样可以确保 webpack 只处理 Cesium 源码，而不会对其他模块进行处理，提高构建效率并避免不必要的问题。
            include: path.resolve(__dirname, 'node_modules/cesium/Source'),
            sideEffects: false, // 含义是告诉 webpack 模块没有副作用，可以进行一些额外的优化处理,进行 Tree Shaking 优化。。
            use: [
              { // 使用了 strip-pragma-loader 来处理模块，该 Loader 可以去除指定的注释。
                loader: 'strip-pragma-loader',
                options: {
                  pragmas: {
                    debug: false
                  }
                }
              }
            ]
          },
          {
            test: /.js$/,
            include: path.resolve(__dirname, 'node_modules/cesium/Source'),
            // 用于指定模块加载器.使用了名为 @open-wc/webpack-import-meta-loader 的加载器。
            // 该加载器是为了处理 JavaScript 中的 import.meta.url，在构建过程中将 import.meta.url 替换为文件的实际路径，以便在构建后的代码中使用。
            use: { loader: require.resolve('@open-wc/webpack-import-meta-loader') }
          }
        ]
      },
      optimization: { // 用于配置 webpack 的优化选项。
        usedExports: true, // 表示启用 Tree Shaking，即在打包时移除未使用的代码，以减小最终打包文件的体积，提高应用性能。
        splitChunks: { // 这是 webpack 的代码分割配置，用于将打包后的代码分割成多个包，以便更好地利用浏览器缓存，提升加载速度和性能。
          maxInitialRequests: Infinity, // 允许并行加载的最大请求数，默认为 3。
          minSize: 0, // 拆分模块的最小大小，默认为 30000 字节。
          maxSize: 250000, // 拆分模块的最大大小，默认为 0，表示没有限制。
          cacheGroups: { // 缓存组配置，用于定义拆分规则。
            vendor: { // 缓存组名称，用于将来自 node_modules 的模块打包成一个单独的包。
              test: /[\\/]node_modules[\\/]/, // 正则表达式用于匹配 node_modules 目录下的模块。
              priority: -10, // 缓存组的优先级，数值越大优先级越高。
              chunks: 'all', // 表示包含所有类型的 chunk。
              name (module) { // 根据模块的 context（上下文）生成名称，通常是模块的文件夹名或者包名，用于最终生成的文件名称。
                // 这是 webpack 中的一个变量，用于获取当前模块的上下文（context），即模块所在的目录路径。
                // 这是一个正则表达式匹配，用于从模块的上下文中提取模块所在的包名。[\\/]: 匹配斜杠 / 或反斜杠 \。
                // node_modules[\\/]: 匹配 node_modules/ 或 node_modules\，表示模块在 node_modules 目录下。
                // (.*?): 匹配任意字符，非贪婪模式，即尽可能少地匹配字符。
                // ([\\/]|$): 匹配斜杠 / 或反斜杠 \，或者字符串结尾 $，用于确定包名的结束位置。
                // 这是正则表达式中捕获组的索引，表示获取第一个捕获组的内容，即包名。
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                // 这是对提取的包名进行处理，将其中的 @ 符号替换为空字符串，通常是因为包名中的 @ 符号是用来表示作用域的，例如 @babel/core 中的 @babel 是一个作用域，需要将其去除。
                //  这是模板字符串，用于生成最终的包名字符串，格式为 npm.包名。
                return `npm.${packageName.replace('@', '')}`
              }
            },
            commons: { // 缓存组名称，用于将来自 cesium 模块的模块打包成一个单独的包。
              name: 'Cesium', // 最终生成的文件名称。
              test: /[\\/]node_modules[\\/]cesium/, // 正则表达式用于匹配 cesium 模块。
              priority: 10, // 缓存组的优先级，数值越大优先级越高。
              chunks: 'all' // 表示包含所有类型的 chunk。
            }
          }
        }
      },
      output: { // 配置输出的文件信息
        sourcePrefix: ' '// 是其中的一个选项，用于设置在生成的打包文件中每行代码前添加的前缀。
      },
      // 这个配置项表示当 webpack 碰到 AMD 模块的 toUrl 方法未定义时是否报错。通常情况下，AMD 模块规范中有一个 toUrl 方法用于将模块名称转换为实际的模块文件路径，但是在某些情况下，该方法可能会未定义。
      // 设置 toUrlUndefined: true 表示即使 toUrl 方法未定义，webpack 也不会报错，而是继续处理这些模块，以免因为一个小问题导致整个构建过程中断。
      amd: {
        toUrlUndefined: true
      },
      resolve: { // 用于配置模块解析的选项，包括模块路径、模块文件的别名等。
        alias: { // 用于指定模块的别名，使得在代码中可以使用别名来引用模块，而不需要使用相对路径或绝对路径。
          '@': path.resolve('src') // 表示将 '@' 别名映射到项目中的 src 目录，即当代码中使用 '@' 别名时，webpack 将会解析为项目的 src 目录路径。
        }
      },
      node: { // node 是用于配置 webpack 在 Node.js 环境中模拟的一些全局变量和模块的选项。
        fs: 'empty', //  禁止 webpack 对 fs 模块的解析，通常用于在客户端项目中避免引入 Node.js 中的文件系统模块，因为在浏览器环境下无法使用。
        Buffer: false, //  禁止 webpack 对 Buffer 全局对象的解析，通常用于在客户端项目中避免引入 Node.js 中的 Buffer 对象，因为在浏览器环境下无法使用。
        http: 'empty', // 'empty': 禁止 webpack 对 http 模块的解析，通常用于在客户端项目中避免引入 Node.js 中的 HTTP 模块，因为在浏览器环境下无法使用。
        https: 'empty',
        zlib: 'empty' // 禁止 webpack 对 zlib 模块的解析，通常用于在客户端项目中避免引入 Node.js 中的压缩模块，因为在浏览器环境下无法使用。
      },
      // plugins 是一个变量，应该是一个包含了需要引入的 webpack 插件的数组。
      // 表示引入的插件将会按照数组 plugins 中的顺序依次应用到 webpack 构建过程中。
      plugins: plugins
    }
  }
}

这是一个整体的配置，大家可以根据需求自行调整。 

4、App.vue 文件配置

<template>
  <router-view />
</template>

<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
</style>

路由文件router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import CesiumContainer from '../views/CesiumContainer.vue'
const routes = [
  {
    path: '/',
    name: 'CesiumContainer',
    component: CesiumContainer
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

 使用 Cesium 对象进行操作，在 mounted 生命周期钩子中创建 Cesium 场景。CesiumContainer.vue 文件

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

<script>
import 'cesium/Build/Cesium/Widgets/widgets.css'
import { onMounted } from 'vue'
import { Viewer } from 'cesium' // OR  /* import * as Cesium from 'cesium' */
import * as Cesium from 'cesium'

export default {
  name: 'CesiumContainer',
  setup() {
    onMounted(() => {
      Cesium.Ion.defaultAccessToken = 'xxxxxxxxxxxx.....yUkGXAtmJBA'

      /* eslint no-new: */
      var viewer = new Viewer('cesiumContainer', {
        animation: true, // 动画小组件
        baseLayerPicker: true, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
        fullscreenButton: false, // 全屏组件
        vrButton: true, // VR模式
        geocoder: true, // 地理编码（搜索）组件
        homeButton: true, // 首页，点击之后将视图跳转到默认视角
        infoBox: true, // 信息框
        sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
        selectionIndicator: true, // 是否显示选取指示器组件
        timeline: true, // 时间轴
        navigationHelpButton: true, // 帮助提示，如何操作数字地球。
        // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
        navigationInstructionsInitiallyVisible: true
      })

    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

index.html文件不变默认挂载app。 

5、启动验证

6、访问页面：

到此，创建vue3项目并集成cesium插件运行，暂时分享完毕，后期我们会深入讲解，敬请期待！