使用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是它公开的导入。

此时，你可以做这样的事情。

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

处理类型检查

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

在 vue.config.js 中修改 Webpack

您可以在此处阅读相关内容，只需将以下内容添加到 vue.config.js 文件中即可。

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