typescript vite+vue3构建项目打包异常

项目环境

vue3.2.25 + vite2.9.2 + typescript4.5.4

异常问题

项目初始化完成后打包异常 Cannot access ambient const enums when the '--isolatedModules' flag is provided.

产生原因：

文件：node_modules/.pnpm/registry.npmmirror.com+@vue+reactivity@3.2.33/node_modules/@vue/reactivity/dist/reactivity.d.ts中

declare class ComputedRefImpl {

private readonly _setter;

dep?: Dep;

private _value;

readonly effect: ReactiveEffect;

readonly __v_isRef = true;

readonly [ReactiveFlags.IS_READONLY]: boolean;

_dirty: boolean;

_cacheable: boolean;

constructor(getter: ComputedGetter, _setter: ComputedSetter, isReadonly: boolean, isSSR: boolean);

get value(): T;

set value(newValue: T);

}

declare const enum ReactiveFlags {

SKIP = "__v_skip",

IS_REACTIVE = "__v_isReactive",

IS_READONLY = "__v_isReadonly",

IS_SHALLOW = "__v_isShallow",

RAW = "__v_raw"

}

类ComputedRefImpl中采用常量枚举const enum ReactiveFlags的ReactiveFlags.IS_READONLY作为key

解决方式：

方式一

修改tsconfig.json配置isolatedModules: boolean

此配置开启后不允许采用常量枚举值作为属性key，同时要求类型导入导出必须明确

// types.ts

export type PersonType = {

name: string;

};

// index.ts 错误

export { PersonType } from "./types";

// index.ts 正确

export type { PersonType } from "./types";

// index.ts 错误

import {PersonType} from './test'

export {PersonType}

// index.ts 正确

import type {PersonType} from './test'

export {PersonType}

方式二

修改tsconfig.json配置skipLibCheck: boolean

此配置开启后将跳过声明文件的类型检查（本项目中声明文件也将被跳过）

方式三

由于vite在构建项目时采用vue-tsc检查类型，可修改build命令为 vue-tsc --noEmit --skipLibCheck && vite build ，从而跳过声明文件类型检查

推荐阅读

 您阅读本篇文章共花了：