vue腳手架配置 加載cesium環境

一、最近在

Vue2

中需要使用到

Cesium

開發,之前是在

Vue3

+

vite

中配置Cesium還是很友善的，因為

vite

提供了相關的插件，隻要引入其插件就可以，但是

Vue2

中配置相對瑪法一點，下面整理了一份針對

VUE2

的

webpack

配置，在項目的根目錄下建立vue.config.js,寫入：

// 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 = "Workers";
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve("src"),
      },
    },
    amd: {
      // Cesium源碼子產品化使用的requireJs
      // 此配置允許webpack友好地在铯中使用require，使webpack打包cesium
      // 告訴Cesium, AMD的webpack版本用來評估要求的聲明是不符合标準的toUrl功能
      toUrlUndefined: true
    },
    // module: {
    //   // 解決require引入警告
    //   unknownContextCritical: false
    // },
    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("./"),
      }),
      // 使Cesium對象執行個體可在每個js中使用而無須import
      new webpack.ProvidePlugin({
        Cesium: ["cesium/Source/Cesium"]
      })
    ],
    module: {
      unknownContextCritical: false,
      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
    },
  },
};
複制代碼
           

二、先安裝好Cesium，然後在使用的地方引入：

import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
           

作者：阿白的白日夢

連結：https://juejin.cn/post/7111976775936114696

來源：稀土掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。