module “**.vue“ has not default

最新推荐文章于 2024-10-19 13:45:39 发布

原创最新推荐文章于 2024-10-19 13:45:39 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

11 篇文章

订阅专栏

本文探讨了在Vue3项目中，设置`happyPackMode`为`true`导致的声明文件生成问题，以及解决方案。当`happyPackMode`为`true`时，打包后自动声明文件无法生成，而设为`false`则影响打包效率。作者提供的解决方案是在导入时使用`@ts-ignore`忽略错误。此外，还分享了在子项目中使用Vue3组件遇到的异步问题，以及通过npm发布和安装来解决声明文件生效的问题。最后，文章提及了两个待解决的技术挑战：子项目组件setup的异步问题和npmlink引入时声明文件不生效。

module “**.vue” has not default

这个问题造成的原因是因为你在vue.config.js中设置了happyPackMode选项，如下所示：

config.module
      .rule('ts')
      .use('ts-loader')
      .loader('ts-loader')
      .tap(options => {
        Object.assign(options || {}, {transpileOnly: false, happyPackMode: false, appendTsSuffixTo: [/\.vue$/]})
        return options
      })

把happyPackMode设置为true就好了
但是你一旦将happyPackMode设置为true你会发现你的vue3打成包后没有自动声明的文件

vue3.0打包自动生成声明文件

vue3.0打包没办法自动生成声明文件，必须将happyPackMode设置为false才可以
vue.config.js

config.module
      .rule('ts')
      .use('ts-loader')
      .loader('ts-loader')
      .tap(options => {
        Object.assign(options || {}, {transpileOnly: false, happyPackMode: false, appendTsSuffixTo: [/\.vue$/]})
        return options
      })

tsconfig.ts

"declaration": true,
 "declarationDir": "dist",
 "typeRoots": ["./src", "./node_modules/@types"],

二者冲突了怎么办呢

本人的解决方案如下：

// eslint-disable-next-line
// @ts-ignore
import example from './example/index.vue';

其实module “**.vue” has not default包错不会影响打包的效果，如果不想看到直接disabled，简单粗暴

其它

1.vue3项目使用子项目组件，提示子项目组件的setup为异步，我tm子项目组件的setup明明是同步啊，目前我的解决方案是打包后基于npm包引入的方式使用，有人知道原因可以评论告诉我。
2.vue3项目打包后，其它项目使用npm link引入发现声明文件没有生效，我的解决方式是将打包好的vue3项目先发布到npm仓库中，然后在其它项目中通过npm install的方式引入(这个时候发现声明文件生效了)。在vue3项目中使用npm build --watch --dest 其它项目/node_modules/****/dist命令，每次修改vue3项目时自动打包覆盖node_modules中的dist文件。

有人拥有更好的解决方案也可以评论告诉我。