在 npm 上发布 Nuxt 3 应用程序/组件，无需 Nuxt 即可由普通 Vue 3 使用

Question

我发布 vue 组件的常用方法是基于这个video。对于 Nuxt 3，工作流程要简单得多，几乎不需要配置太多，只需

npm publish

，然后安装包，使用扩展，就可以了。

所以我的问题是，如何配置一个可以同时满足 Nuxt3 和 Vue 项目（没有 Nuxt）的 Nuxt 3 应用程序。那么这是否意味着我仍然需要使用index.js，然后配置我的nuxt.config

nuxt.config

vite:{
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'src/index.js'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
}

我也有 gh-pages 的配置

nuxt.config

  app: {
    baseURL: process.env.NODE_ENV === "production" ? "/my-repo-name/" : "/",
    buildAssetsDir: "assets",
  },

如果我想单独运行它们，如何制作使用不同构建的配置

我现在拥有的东西

对于我的 gh 页面

package.json

    "deploy": "nuxt generate && gh-pages --dotfiles -d .output/public"

并为 npm 构建

package.json

    "npmx": "nuxt build .npm-publish",

nuxt build 产生的结果是我之前使用的普通 vite 构建所不熟悉的。它看起来确实像通常的 nuxt 构建输出。那么我该如何解决这个问题呢？我可以查找任何建议或链接吗？谢谢

Answer 1

所以要使用组件、布局等文件，我们只需将相应的文件夹发布到npm即可。因此，当我们导入时，它只是 Vue 文件。
nuxt项目的package.json

{
“名称”：“@harikrishnan_pv/测试按钮”，
“版本”：“1.0.6”，
"description": "可重用的 Nuxt 3 组件的集合",
“文件”：[
"components",// 包含组件文件夹
“layouts” // 包含布局文件夹
],
“类型”：“模块”，
“脚本”：{
“构建”：“nuxt构建”，
“dev”：“nuxt dev”，
“生成”：“nuxt生成”，
“预览”：“nuxt预览”，
“postinstall”：“nuxt 准备”
}, “关键词”：[
“nuxt3”，
“组件”，
“可重复使用”
],
“作者”：“harikrishnan p v”，
“许可证”：“麻省理工学院”，
“devDependency”：{
“@nuxt/devtools”：“最新”，
"@nuxtjs/tailwindcss": "^6.10.1",
“nuxt”：“^3.8.2”，
“vue”：“^3.3.8”，
“vue-router”：“^4.2.5”
}
}

所以在 npm 中它将是 vue 页面。

将其安装到 nuxt 或 vue 项目中并导入到任何你想要的地方

import blue from '@harikrishnan_pv/test-buttons/components/Button/blue.vue';

将“blue”替换为您的组件名称，并将“@harikrishnan_pv/test-buttons/components/Button/blue.vue”替换为您的路径

例如，你可以尝试我的：- npm i @harikrishnan_pv/test-buttons