[Cesium] VueCli3 + Cesium1.73配置问题

1.问题背景：

通过VueCli3创建Vue项目后，安装cesium，通过查阅（官网+百度）资料进行配置，根据前人们的各种配置方案，最终配置好了，但在学习官网教程时发现，第二个示例加载飞机3D模型和第三个3D建筑物时，发现按照官网代码不能成功，报错信息如图2所示，百思不得其解，于时又开始了漫长的查阅旅程。

2.解决方法：

截至2020.9.15查阅配置文件时发现，大部分配置信息是基于VueCli2.x的，小部分是基于VueCli3.x以上的，两者区别在于3.x需要自己创建vue.config.js文件，并进行相应的配置。

我第一次配置时，根据整合到的有用信息，形成以下配置文件：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const debug = process.env.NODE_ENV !== 'production'

//定义cesium源码路径
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'

module.exports = {
    publicPath: '',
    configureWebpack: {
        output: {
            sourcePrefix: ' '
        },
        amd: {
            toUrlUndefined: true
        },
        resolve: {
            alias: {    
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve('src'),
                '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('./')
            })
        ],
        module: {
            unknownContextCritical: /^.\/.*$/,
            unknownContextCritical: false
        }
    }
}

按照上面这个配置加载Helloword基本没问题，能实现，问题在于加载官网的示例2、3时，从cesium ion读取在线资源时报错，相应的3D模型也无法加载。经过百度后，只发现一篇与我的问题相符合的博客，vue-cli3 使用 cesium 创建 gltf/glb 3d 模型（https://blog.csdn.net/weixin_43958085/article/details/105089465?utm_source=app）

博客大致意思就是说，你需要把glb/gltf数据发布到服务器上，然后在uri中引用网络地址，就可以了。经过我测试，确实可以访问了。随之官网2的示例跑通了。但是官网3示例不行，因为官网3示例是基于glb格式通过cesium ion在线资源转换为3D tileset格式，直接访问glb是不可以的。

继续查阅。。。

3.Cesium 论坛

不得不说，百度国内的资源找不到解决方法，最后只能去Cesium论坛去找了。最终，功夫不负有心人，找到了关键的一篇博客。

https://community.cesium.com/t/cesium-1-63-breaks-vue-web-pack-application/8814/5

在这里基本确定了数据模型加载不出来是因为配置的问题。按照博主的说明，进入到了他给的一个github示例中

https://github.com/meschg/vue-stack-cesium

通过查看他的配置文件vue.config.js，修改自己的配置，最终成功了！

修改后的vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const cesiumSource = './node_modules/cesium/Source'
const cesiumBuild = './node_modules/cesium/Build/Cesium'

module.exports = {
  // 默认打包路径为/根目录
  // publicPath = '/'
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  configureWebpack: {
    output: {
      //让webpack正确处理多行字符串
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      extensions: [],
      // 配置别名
      alias: {
        // 默认配置中，@为path.resolve('src')
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
        'store': '@/store',
        'cesium': path.resolve(__dirname,cesiumSource)
      }
    },
    plugins: [
      new CopyWebpackPlugin([{from: path.join(cesiumSource,'Workers'),to: 'Workers'}]),
      new CopyWebpackPlugin([{from: path.join(cesiumBuild, 'Assets'),to: 'Assets'}]),
      new CopyWebpackPlugin([{from: path.join(cesiumBuild, 'Widgets'), to: 'Widgets'}]),
      new CopyWebpackPlugin([{from: path.join(cesiumSource, 'ThirdParty'),to: 'ThirdParty'}]),
      //定义 Cesium 从哪里加载资源，如果使用默认的''，
      //却变成了绝对路径了，所以这里使用'./',使用相对路径
      new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify('./')})
    ],
    module: {
      // 如果运行时报 "Cannot find module "." 可以考虑将 unknownContextRegExp 放开。
      unknownContextCritical: /^.\/.*$/,
      // 不让webpack打印载入特定库时候警告
      unknownContextCritical: false,
      // 配置相应的loader
      rules: [{
        // Remove pragmas within cesium as recommended - https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/blob/master/webpack.release.config.js
        test: /\.js$/,
        enforce: 'pre',
        include: path.resolve(__dirname, 'node_modules/cesium/Source'),
        sideEffects: false,
        use: [{
          loader: 'strip-pragma-loader',
          options: {
            pragmas: {
              debug: false
            }
          }
        }]
      }]
    }
  }
}

4.重点说明

配置修改有两点非常重要，第一,需要加载一个loader以处理glb等数据类型的数据；第二，配置plugins中的Workers、Assets\Widgets、ThirdParty的path有变化。

记于2020.9.15

祝大家好运！