Vue CLI 3에서 만든 프로젝트를 사용하여 typescript의 node_modules를 Import하려면 어떻게 해야 합니까?

Vue CLI 3에서 만든 프로젝트를 사용하여 typescript의 node_modules를 Import하려면 어떻게 해야 합니까?

Vue CLI 3을 사용하여 Vue.js 프로젝트를 만들고 typscript를 활성화하여 Cesium을 작동시키려고 합니다.

다음을 수행했습니다.

npm install cesium
npm install @types/cesium

근데 제가 공연할 때

npm run serve

세슘글로브는 잘 보여요 VS 코드에서는

Cannot find module cesium/Cesium

내가 가져온 세슘에 대해

관련 파일은 다음과 같습니다.

Cesium.vue:

<template>
    <div id="cesiumContainer"></div>
</template>

<script lang='ts'>
import Vue from 'vue';
import Cesium from 'cesium/Cesium';

export default Vue.extend({
  name: 'Cesium',
  data() {
    return {
      //   viewer: null,
    };
  },
  mounted() {
    let viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: Cesium.createTileMapServiceImageryProvider({
        url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
      }),
      baseLayerPicker: false,
      geocoder: false,
      // requestRenderMode: true
      // skyBox: false
    });
  },
});
</script>

<style>
#cesiumContainer {
  /* width: 100%; */
  /* height: 100%; */
  width: 1024;
  height: 768;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

main.ts:

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

import Cesium from 'cesium/Cesium';
// noinspection ES6UnusedImports
import widget from 'cesium/Widgets/widgets.css';
Vue.use(Cesium);
Vue.use(widget);

Vue.config.productionTip = false;

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

vue.config.config:

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

const debug = process.env.NODE_ENV !== 'production';
let cesiumSource = './node_modules/cesium/Source';
let cesiumWorkers = '../Build/Cesium/Workers';
module.exports = {
  baseUrl: '',
  devServer: {
    port: 8080,
  },
  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,
    },
  },
};

tsconfig.json에는 다음이 포함됩니다.

{
  "compilerOptions": {
    "types": ["cesium"],
}

내가 뭘 잘못하고 있지?

언급URL : https://stackoverflow.com/questions/53787337/how-to-import-node-modules-in-typescript-using-vue-cli-3-created-project