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

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。