4. cesium1.95版本结合typescript搭建vue框架环境

  cesium1.95版本结合typescript整合vue版本配置搭建开发环境，开箱即用 

需要项目代码架子可以联系博主

vue.config.js

const {defineConfig} = require('@vue/cli-service')
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 = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    configureWebpack: {
        externals: {
            'cesium': 'Cesium',
        },
        output: {
            sourcePrefix: " ", // 让webpack 正确处理多行字符串配置 amd参数
        },
        amd: {
            toUrlUndefined: true, // webpack在cesium中能友好的使用require
        },
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                "@": path.resolve("src"),
                cesium: path.resolve(__dirname, cesiumSource),
            }
        },
        plugins: [
            new CopyWebpackPlugin({
                patterns: [
                    {from: path.join(cesiumSource, cesiumWorkers), to: "Workers"},
                    {from: path.join(cesiumSource, "Assets"), to: "Assets"},
                    {from: path.join(cesiumSource, "Widgets"), to: "Widgets"},
                    {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/,
            rules: [
                {
                    test: /\.js$/,
                    use: {
                        loader: '@open-wc/webpack-import-meta-loader',
                    },
                },
            ]
        },
    },
    devServer: {
        hot: true,
        open: true,
        // 代理
        proxy: {
            '/api': {
                target: 'http://localhost:8080/',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        port: 9999,
    }
})

main.ts

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'cesium/Widgets/widgets.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
    render: h => h(App),
}).$mount('#app')

helloworld.vue

App.vue

shims-tsx.d.ts

import Vue, {VNode} from 'vue'

declare global {
    namespace JSX {
        // eslint-disable-next-line @typescript-eslint/no-empty-interface
        interface Element extends VNode {
        }
        // eslint-disable-next-line @typescript-eslint/no-empty-interface
        interface ElementClass extends Vue {
        }
        interface IntrinsicElements {
            [elem: string]: any;
        }
    }
    interface Window {
        __wxjs_environment: any;
        WebViewJavascriptBridge: any;
        _czc: any;
    }
}

shims-vue.d.ts

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}