使用 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 文件并在 vue.config.js 中使用 configureWebpack.resolve.alias 以允许 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

概述

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

处理外部

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': '_'
    }
  }
}