• 在vue-cli4.x 中使用cesium1.8


    1、vue-cli4.x + cesium1.8

    2、配置vue.config.js

    "use strict";
    const path = require("path");
    const defaultSettings = require("./src/settings.js");
    ​
    ​
    // 1、引入cesium相关文件
    const CopyWebpackPlugin = require("copy-webpack-plugin");
    const webpack = require("webpack");
    let cesiumSource = "./node_modules/cesium/Source";
    let cesiumWorkers = "../Build/Cesium/Workers";
    ​
    function resolve(dir) {
      return path.join(__dirname, dir);
    }
    ​
    const name = defaultSettings.title; // 网址标题
    const port = 8013; // 端口配置
    // All configuration item explanations can be find in https://cli.vuejs.org/config/
    module.exports = {
      // hash 模式下可使用
      // publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
      publicPath: "/",
      outputDir: "dist",
      assetsDir: "static",
      lintOnSave: process.env.NODE_ENV === "development",
      productionSourceMap: false,
      devServer: {
        port: port,
        open: true,
        overlay: {
          warnings: false,
          errors: true
        },
        proxy: {
          "/api": {
            target: process.env.VUE_APP_BASE_API,
            changeOrigin: true,
            pathRewrite: {
              "^/api": "api"
            }
          },
          "/auth": {
            target: process.env.VUE_APP_BASE_API,
            changeOrigin: true,
            pathRewrite: {
              "^/auth": "auth"
            }
          }
        }
      },
      configureWebpack: {
        // provide the app's title in webpack's name field, so that
        // it can be accessed in index.html to inject the correct title.
        name: name,
        // 2、cesium 进行配置
        resolve: {
          alias: {
            "@": resolve("src"),
            "@crud": resolve("src/components/Crud"),
            "cesium": path.resolve(__dirname, cesiumSource)
          }
        },
        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("/")
          })
        ]
      },
      chainWebpack(config) {
        config.plugins.delete("preload"); // TODO: need test
        config.plugins.delete("prefetch"); // TODO: need test
    // set svg-sprite-loader
        config.module
          .rule("svg")
          .exclude.add(resolve("src/assets/icons"))
          .end();
        config.module
          .rule("icons")
          .test(/.svg$/)
          .include.add(resolve("src/assets/icons"))
          .end()
          .use("svg-sprite-loader")
          .loader("svg-sprite-loader")
          .options({
            symbolId: "icon-[name]"
          })
          .end();
    ​
        // set preserveWhitespace
        config.module
          .rule("vue")
          .use("vue-loader")
          .loader("vue-loader")
          .tap(options => {
            options.compilerOptions.preserveWhitespace = true;
            return options;
          })
          .end();
    ​
        config
          // https://webpack.js.org/configuration/devtool/#development
          .when(process.env.NODE_ENV === "development",
            config => config.devtool("cheap-source-map")
          );
    ​
        config
          .when(process.env.NODE_ENV !== "development",
            config => {
              config
                .plugin("ScriptExtHtmlWebpackPlugin")
                .after("html")
                .use("script-ext-html-webpack-plugin", [{
                  // `runtime` must same as runtimeChunk name. default is `runtime`
                  inline: /runtime..*.js$/
                }])
                .end();
              config
                .optimization.splitChunks({
                chunks: "all",
                cacheGroups: {
                  libs: {
                    name: "chunk-libs",
                    test: /[\/]node_modules[\/]/,
                    priority: 10,
                    chunks: "initial" // only package third parties that are initially dependent
                  },
                  elementUI: {
                    name: "chunk-elementUI", // split elementUI into a single package
                    priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                    test: /[\/]node_modules[\/]_?element-ui(.*)/ // in order to adapt to cnpm
                  },
                  commons: {
                    name: "chunk-commons",
                    test: resolve("src/components"), // can customize your rules
                    minChunks: 3, //  minimum common number
                    priority: 5,
                    reuseExistingChunk: true
                  }
                }
              });
              config.optimization.runtimeChunk("single");
            }
          );
      },
      transpileDependencies: [
        "vue-echarts",
        "resize-detector"
      ]
    };

    3、main.js 全局引入cesium相关文件

    var cesium = require('cesium/Cesium');
    var widgets= require('cesium/Widgets/widgets.css');
    ​
    Vue.prototype.Cesium = cesium
    Vue.prototype.widgets = widgets

    4、 创建cesium.vue文件

     1 <template>
     2   <div class="CesiumPage ">
     3     <div id="cesiumContainer"></div>
     4   </div>
     5 </template>
     6  7 <script>
     8 export default {
     9   name: "CesiumPage",
    10   data() {
    11     return {};
    12   },
    13   mounted() {
    14     var viewer = new this.Cesium.Viewer("cesiumContainer", {});
    15 16   },
    17 18   methods: {}
    19 };
    20 </script>
    21 22 <style lang="scss" scoped>
    23 .CesiumPage {
    24    100%;
    25   height: 100%;
    26 }
    27 </style>

    5、遇到的一些问题

    Cannot GET /situation/index/Assets/approximateTerrainHeights.json
    解决方法 在vue.config.js 进行相关的修改
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify('/')   // ./ 改为 /
    })

     

  • 相关阅读:
    使用django开发一个web项目初试
    关于github一些比较重要的命令
    删除github repository的方法
    Node、npm与Vue配置与问题记录
    [记忆]5月第二周
    git am patch冲突解决步骤
    git丢弃本地修改的几种方式
    Log4j 2.X 漏洞解决
    Maven依赖范围Scope及传递性依赖
    Mysql创建事件定时任务
  • 原文地址:https://www.cnblogs.com/dswg/p/15132212.html
Copyright © 2020-2023  润新知