使用TypeScript时如何在单个文件组件中导入Vue？

Question

我有一个单一文件组件，我需要导入Vue：

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

我正在将vue.js作为模块导入浏览器：

<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>

作为一种解决方法，我尝试将导入内容添加到comp.js的顶部：

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

但这没有帮助。

如何将导入重新连接到将在Web服务器上使用的路径？我检查了webpack的选项，但只发现resolve，这似乎有助于webpack在打包时查找内容。我需要一种“输出重写”类型的选项。

请注意，我使用的是ES模块，而不是CommonJS或RequireJS。 tsconfig.json：

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

更新，我试图将最终路径放入.vue文件，并在configureWebpack.resolve.alias中使用vue.config.js来允许Vue编译器定位该模块，但这也没有。工作。

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'.

Answer 1

概述

您可以在configureWebpack中添加vue.config.js来修改Webpack的配置，在Webpack中，您可以使用externals解决此问题。

处理外部因素

外部提供了一种导入外部库的方法。

在您的webpack配置中，您将添加一条看起来像这样的行。

以lodash为例，因为导入和全局变量不同。

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

_是webpack可以获取的全局变量，而lodash是它公开的导入内容。

此时，您可以执行类似的操作。

import * as lodash from 'lodash'

处理类型检查

要使用此方法进行类型检查，您npm install @types/...和TypeScript将为该导入选择类型。

在vue.config.js中修改Webpack

您可以阅读有关here的信息，只需将以下内容添加到vue.config.js文件中即可。

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