Vue3配置Cesium

0. 说明

基于Vue3配置Cesium，软件版本如下。

• node@14.17.3
• npm@8.4.1
• vue/cli@4.5.15

1. 创建 Vue 项目

安装 Vue CLI

E:\CesiumProject> npm install -g @vue/cli

创建项目，选项如下，选择 Manually select features

E:\CesiumProject> vue create world
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes
   
Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features

使用上下键和空格选上 Router 和 Vuex

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

按如下配置

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM

Vue CLI v4.5.15
✨  Creating project in E:\CesiumProject\world.
⚙️  Installing CLI plugins. This might take a while...

added 1282 packages in 23s
🚀  Invoking generators...
📦  Installing additional dependencies...

added 76 packages in 4s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project world.
👉  Get started with the following commands:

 $ cd world
 $ npm run serve

---

Tips
通过图形界面方式创建 Vue 项目

E:\CesiumProject>vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

---

2. 配置 Cesium

先进入项目目录

E:\CesiumProject>cd world
E:\CesiumProject\world>

安装 cesium

E:\CesiumProject\world> npm i cesium --save

配置 vue.config.js ，如果没有就在项目根目录创建一个。

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const cesiumSource = "./node_modules/cesium/Source";

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  devServer: {
    port: 8080,
    open: true,
    proxy: {
      //配置代理服务器来解决跨域问题
      "/api": {
        target: "http://localhost:80/api/", //配置要替换的后台接口地址
        changOrigin: true, //配置允许改变Origin
        pathRewrite: {
          "^/api/": "/",
        },
      },
    },
  },
  lintOnSave: false,
  configureWebpack: {
    output: {
      sourcePrefix: " ", // 1 让webpack 正确处理多行字符串配置 amd参数
    },
    amd: {
      // 2
      toUrlUndefined: true, // webpack在cesium中能友好的使用require
    },
    resolve: {
      extensions: [".js", ".vue", ".json"],
      alias: {
        //'vue$': 'vue/dist/vue.esm.js',
        "@": path.resolve("src"),
        components: path.resolve("src/components"),
        assets: path.resolve("src/assets"),
        views: path.resolve("src/views"),
        cesium: path.resolve(__dirname, cesiumSource),
      },
    },
    plugins: [
      // 4
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Workers"), 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: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: "@open-wc/webpack-import-meta-loader",
          },
        },
        {
          test: /\.(glb|gltf)?$/,
          use: {
            loader: "url-loader",
          },
        },
      ],
    },
  },
};

3. 安装一些必要的模块

• webpack-import-meta-loader

  E:\CesiumProject\world> npm install @open-wc/webpack-import-meta-loader --save-dev
  

• node-sass

  E:\CesiumProject\world> npm i node-sass@4.14.1 --save-dev
  

• sass-loader

  E:\CesiumProject\world> npm i sass-loader@10.1.0 --save-dev
  

Sass直接安装，会自动安装为最新版本，可能会导致项目无法启动，因此安装如上建议版本。

4. 测试 Cesium

在 sec/views/ 下新建 Index.vue，如下

<template>
  <div id="container"></div>
</template>
<script>
import * as Cesium from "cesium/Cesium";
import * as widgets from "cesium/Widgets/widgets.css";
export default {
  name: 'HelloCesium',
  mounted () {
    const viewer = new Cesium.Viewer('container');
  }
}
</script>
<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
}
</style>

在 src/router/index.js 中添加

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  
  /** 添加一个页面 **/
  {
    path: '/index',
    name: 'Index',
    component: () => import('../views/Index.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

启动项目

E:\Sweetyaya\CesiumProject\world>npm run serve

> world@0.1.0 serve
> vue-cli-service serve

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.xxx.xxx:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

访问 http://localhost:8080/index 如下。

5. 参考

参考了如下博客

[1]. 使用vue-cli创建项目
https://www.cnblogs.com/huoyz/p/14377735.html

[2]. cli.vuejs.org
https://cli.vuejs.org/zh/

[3]. VUE+Cesium创建地球(ThirdPartyzip.js问题解决)
https://blog.csdn.net/qq_44749616/article/details/120328371

[4]. 新建vue项目中无router文件夹，vue安装路由
https://blog.csdn.net/weixin_43871857/article/details/122545961

[5]. VUE笔记：Failed to resolve loader: sass-loader
https://www.cnblogs.com/chig/p/15364680.html

.
.
.
.
.
.

---

桃花仙人种桃树，又摘桃花换酒钱_