Vue3 + ts + Cesium环境配置
安装好cesium后,配置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"), }, }, 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: false, unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/, }, }, }
创建一个cesium容器
<template> <div id="cesiumContainer"></div> </template> <script setup lang='ts'> import { onMounted } from "vue"; import * as Cesium from "cesium" import "cesium/Build/Cesium/Widgets/widgets.css" onMounted(()=>{ const viewer = new Cesium.Viewer("cesiumContainer") }) </script> <style scoped> #cesiumContainer{ width: 100%; height: 100%; } </style>
运行后会出现如下错误
Module parse failed: Unexpected token (6357:57)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| function getWorker(options = {}) {
> return new Worker(new URL(workerData.scripts[0], import.meta.url), options);
| }
|
需要安装loader
npm install @open-wc/webpack-import-meta-loader -d
在vue.config.js文件module中添加:
rules: [ { test: /\.js$/, use: { loader: '@open-wc/webpack-import-meta-loader', }, }, ]