解决in ./node_modules/cesium/Source/ThirdParty/zip.js

2021-09-25 22:33:37 阅读：1198 来源： 互联网

标签：node ThirdParty zip require js webpack vue cesium path

首先我们先创建个vue项目

vue create cesium_dome

然后引入cesium

npm i cesium --save

在vue.config.js配置(没有就自己在项目根目录创建一个)

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');
 
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const cesiumSource = './node_modules/cesium/Source'
 
function resolve(dir) {
  return path.join(__dirname, dir);
}
 
module.exports = {
  devServer: {
    port: 8888,
    open: true,
  
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' ' // 1 让webpack 正确处理多行字符串配置 amd参数
    },
    amd: { // 2
      toUrlUndefined: true // webpack在cesium中能友好的使用require
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'components': path.resolve('src/components'),
        'assets': path.resolve('src/assets'),
        'views': path.resolve('src/views'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [ // 4
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), 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({ // 5
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ], 
  }
};

然后在main.js添加

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
var cesium = require('cesium/Cesium.js');
var widgets = require('cesium//Widgets/widgets.css');
 
// 如果vue.config.js中不配置别名，就要用下面的方式按路径引入
// var cesium = require('cesium/Build/Cesium/Cesium.js');
// var widgets = require('cesium/Build/Cesium/Widgets/widgets.css');
 
Vue.prototype.cesium = cesium
Vue.prototype.widgets = widgets
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

创建个index.vue

<template>
  <div
    id="container"
    class="box"
  >
    <div id="cesiumContainer"></div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
    }
  },
  methods: {
    init () {
      const Cesium = this.cesium
      const viewer = new Cesium.Viewer('cesiumContainer');
      viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
    }
  },
  mounted () {
    this.init()
  }
}
</script>
 
<style scoped lang="scss">
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>

启动会出现以下问题

in ./node_modules/cesium/Source/ThirdParty/zip.js

在这里插入图片描述

由于在 ./node_modules/cesium/Source/ThirdParty/zip.js 文件中使用了 import.meta 语法，webpack 默认不支持，在进行项目构建时，会报如下错误，提示信息需要添加 loader。

接下来我们安装 loader

npm install @open-wc/webpack-import-meta-loader --save-dev

yarn add @open-wc/webpack-import-meta-loader --dev

//二选一

然后在vue.config.js中添加(在plugins[…]后面)

 module: {
      rules: [
      {
      test: /\.js$/,
      use: {
      loader: '@open-wc/webpack-import-meta-loader',
      },
      },
    ]}

然后我们再次运行

在这里插入图片描述
转载：https://blog.csdn.net/qq_44749616/article/details/120328371?utm_source=app&app_version=4.15.0&code=app_1562916241&uLinkId=usr1mkqgl919blen

标签：node,ThirdParty,zip,require,js,webpack,vue,cesium,path
来源： https://blog.csdn.net/weixin_42530658/article/details/120478141

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9