TypeScript를 사용할 때 단일 파일 구성 요소에서 Vue를 가져오는 방법

TypeScript를 사용할 때 단일 파일 구성 요소에서 Vue를 가져오는 방법

단일 파일 컴포넌트가 있으며 Vue를 Import해야 합니다.

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
...
@Component({...})
export class Comp extends Vue {...}

브라우저에서 vue.js를 모듈로 Import합니다.

<script type="module" src="module/vue/vue.js"></script>

에러가 납니다.

Uncaught TypeError: Class extends value undefined is not a constructor or null

내부 어딘가에서eval()어떤.vue-cli-service --target lib에 의해 생성됩니다.SFC도 모듈로 로드합니다.

<script type="module" src="module/comp/comp.js"></script>

회피책으로 Import를 추가하려고 했습니다.comp.js:

import Vue from '/module/vue/vue.js'
import Component from '/module/vue-class-component/vue-class-component.js'
(function webpackUniversalModuleDefinition(root, factory) {
...

그건 도움이 안 돼요

웹 서버에서 사용하는 경로에 Import를 다시 연결하려면 어떻게 해야 합니까?웹 팩 옵션을 확인했지만 찾을 수 없었다.resolve웹팩이 패키징하는 동안 물건을 찾는 데 도움이 될 것 같습니다."출력 개서" 같은 옵션이 필요합니다.

공통 모듈이 아닌 ES 모듈을 사용하고 있습니다.JS 또는 요구JS.tsconfig.json:

compilerOptions: {"target": "ES2016", module: "ES2015" } 

업데이트 최종 경로를 .vue 파일에 넣고 사용하려고 했습니다.configureWebpack.resolve.alias에vue.config.jsVue 컴파일러가 모듈을 찾을 수 있도록 합니다만, 그것도 동작하지 않습니다.

vue.config.js:

module.exports = {
    runtimeCompiler: true,
    configureWebpack: {
        externals: [
            'module/vue/vue',
            'module/vue-class-component/vue-class-component',
        ],
        resolve: {
            alias: {
                'module/vue/vue': 'vue/dist/vue.esm.js',
                'module/vue-class-component/vue-class-component': 'vue-class-component/dist/vue-class-component.esm.js'
            }
        },
    }
}

comp.vue:

...
import Vue from './module/vue/vue'
import Component from 'module/vue-class-component/vue-class-component'

줄 뿐이다

ERROR in .../src/comp.vue
16:17 Cannot find module 'module/vue/vue'.

개요

추가할 수 있습니다.configureWebpack에서vue.config.js웹 팩 구성을 수정하려면 웹 팩을 사용하여 이 문제를 해결할 수 있습니다.externals.

외부 처리

외부에서는 외부 라이브러리를 Import할 수 있습니다.

웹 팩 설정에서 다음과 같은 행을 추가합니다.

렛츠lodash예를 들어 Import 변수와 글로벌 변수가 다르기 때문입니다.

// webpack.config
externals: {
  'lodash': '_'
}

_글로벌 변수 웹 팩이 붙잡을 수 있고lodash공개하는 Import입니다.

이쯤에서 이런 걸 할 수 있어요.

import * as lodash from 'lodash'

취급 유형 검사

이 방법으로 유형 검사를 처리하려면npm install @types/...TypeScript는 해당 Import의 유형을 선택합니다.

vue.config.js의 웹 팩 수정

여기에 기재되어 있습니다.단, vue.config.js 파일에 다음 내용을 추가합니다.

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'lodash': '_'
    }
  }
}

언급URL : https://stackoverflow.com/questions/57971988/how-to-import-vue-in-single-file-component-when-using-typescript