通过npm安装的方式在vue2工程中引入mars3d和cesium报错，怎么解决？

Question

vue版本是vue2。
前端工程的webpack版本是webpack4，版本号4.47.0。
参考的工程是mars3d基于vue2的工程。
首先在package.json中添加了依赖包：
在dependencies:中添加：
"@turf/turf": "^6.5.0",
"mars3d": "3.7.0",
"mars3d-cesium": "1.118.0"
在devDependencies中添加
"copy-webpack-plugin": "^6.3.2",
"node-polyfill-webpack-plugin": "^2.0.1"
然后在vue.config.js中添加：

const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

...省略

  configureWebpack:(config) => {
    const cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' // cesium库安装目录
    const cesiumRunPath = './mars3d-cesium/' // cesium运行时路径

    if (process.env.NODE_ENV === 'production') {
      // 在生产环境下自定义 CopyPlugin 的行为，或者禁用它
      // 例如：
      // config.plugins.push(
      //   new CopyPlugin({
      //     patterns: [
      //       { from: 'public', to: 'public' },
      //       // 添加更多的复制规则...
      //     ],
      //   })
      // );
    } else {
      // 在开发环境下禁用 CopyPlugin
      config.plugins = config.plugins.filter(
        plugin => !(plugin.constructor && plugin.constructor.name === 'CopyPlugin')
      );
    }
    return {
      name: name,
      resolve: {
        alias: {
          '@': resolve('src')
        }
      },
      module: { unknownContextCritical: false }, // 配置加载的模块类型，cesium时必须配置
      plugins: [
        // http://doc.ssc.vip/ssc-vue/other/faq.html#使用gzip解压缩静态文件
        isProduction && new CompressionPlugin({
          cache: false,                   // 不启用文件缓存
          test: /\.(js|css|html)?$/i,     // 压缩文件格式
          filename: '[path].gz[query]',   // 压缩后的文件名
          algorithm: 'gzip',              // 使用gzip压缩
          minRatio: 0.8                   // 压缩率小于1才会压缩
        }),
        // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
        new webpack.DefinePlugin({
            CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
        }),
        // Cesium相关资源目录需要拷贝到系统目录下面（部分CopyWebpackPlugin版本的语法可能没有patterns）
        new CopyWebpackPlugin({
            patterns: [
                { from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
                { from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
                { from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
                { from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
            ]
        }),
        new NodePolyfillPlugin()
      ].filter(Boolean)
    }
  },

然后修改public文件夹中的html移除掉直接引用的mars3d和cesium的js及样式
然后在代码中import mars3d和cesium
最后npm install
然后npm run dev
然后就报错了
./node_modules/mars3d/dist/mars3d.js 14:18927 Module parse failed: Unexpected token (14:18927) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
注意到mars3官方的基于vue2的demo的webpack版本是webpack5。
怎么解决？

Answer 1

引自免费微信小程序：皆我百晓生

根据你提供的描述，看起来你在尝试在Vue 2项目中引入Mars3D和Cesium时遇到了问题。你提到的主要错误是模块解析失败，这可能是由于缺少适当的loader来处理特定的文件类型导致的。考虑到Mars3D官方demo使用的是webpack 5，而你正在使用的是webpack 4，这可能是导致问题的一个原因。不过，让我们先尝试一些解决方案来解决这个问题。

首先，确保你的项目中已经安装了所有必要的loader。对于Mars3D和Cesium，你可能需要确保已经安装了处理CSS、图片和其他资源的loader，如css-loader、style-loader等。请确保它们都已经安装并正确配置在webpack中。

另外，你遇到的问题可能是由于Mars3D或Cesium中的一些代码使用了新的JavaScript特性（如模块语法），而这些特性在你的环境中没有被正确处理。你可以尝试更新webpack和相关的loader到与Mars3D官方demo相同的版本（即webpack 5），看看是否能够解决问题。

在更新webpack版本之前，我还想提供一些可能的解决方案：

1. 检查loader配置：确保你的webpack配置中包含了处理JavaScript文件的loader（如babel-loader）。如果没有配置适当的loader，webpack可能无法正确解析模块。
2. 检查版本兼容性：确认你使用的Mars3D和Cesium的版本与你的Vue和webpack版本兼容。有时候，库的新版本可能需要更高版本的依赖来正常工作。
3. 检查路径和别名配置：确保你在webpack配置中正确设置了路径和别名，特别是与Mars3D和Cesium相关的路径。这包括设置CESIUM_BASE_URL和其他相关路径。

如果以上方法仍然无法解决问题，我建议你尝试以下步骤：

• 更新webpack到版本5（如果可能的话），因为Mars3D官方demo使用的是webpack 5。
• 更新所有相关的依赖库到最新版本，以确保兼容性。
• 检查并更新你的webpack配置，确保它与Mars3D官方demo的配置兼容。

如果你决定更新webpack到版本5，请注意可能会有一些配置上的变化，因此你需要仔细检查并调整你的webpack配置以适应新版本。

最后，如果问题仍然存在，我建议你查看Mars3D的官方文档或社区论坛，看看是否有其他用户遇到了类似的问题，并找到解决方案。