2

对于以下问题的任何帮助将不胜感激！

情况：

我的项目包含两个包：

  1. 子组件库

    • 包含以组合 API 样式编写的单个视图About.vue（带有 vue2 辅助库@vue/composition-api和vuex-composition-helpers）
    • 导出单个RouteConfig
    • 构建为一个库

    views/About.vue（孩子）

    <template>
  <div class="about">
    <h1>This is an about page (as component lib)</h1>
  </div>
</template>

<script>
import { defineComponent } from "@vue/composition-api";
import { createNamespacedHelpers } from "vuex-composition-helpers";

export default defineComponent({
  components: {},
  setup(_, { root }) {
    const { useGetters, useActions } = createNamespacedHelpers("account"); // error thrown here!
  }
});
</script>

    router/index.ts（孩子）

    export const routes: Array<RouteConfig> = [{
    path: "/",
    name: "About",
    component: () => import(/* webpackChunkName: "about" */ "../views/About.vue")
}];

    lib.ts（孩子）

    export const routes = require("@/router").routes;

    package.json（孩子）

    "scripts": {
  "build": "vue-cli-service build --target lib --name child-component-lib src/lib.ts"
...

  1. 父应用

    • 将路由从child-component-lib导入到其路由器
    • 包含一个简单的视图，显示一行文本和一个<router-view />

    package.json（父母）

    "dependencies": {
    "@tholst/child-component-lib": "file:../child-component-lib",

    router/index.ts（父母）

    import { routes as childComponentRoutes } from "@tholst/child-component-lib";

const routes: Array<RouteConfig> = [...childComponentRoutes];
const router = new VueRouter({routes});    
export default router;

    App.vue（父母）

    <template>
  <div id="app">
    <Home />
    <router-view />
  </div>
</template>

<script>
import { defineComponent } from "@vue/composition-api";
import Home from "@/views/Home.vue";

export default defineComponent({
  components: {
    Home
  },
  setup(_, { root }) {
    ...
  }
});
</script>

预期行为

它可以正常工作。

实际行为

我在控制台中看到错误输出。[Vue warn]: Error in data(): "Error: You must use this function within the "setup()" method, or insert the store as first argument."错误消息具有误导性，因为错误实际上是在setup()方法内部引发的。它可以追溯到getCurrentInstance()返回undefined（内部@vue/composition-api）。

调查：

  • 事实证明，当我在父应用程序本身中包含相同内容时，错误消失About.vue了（只需切换路线，尝试一下），即，当我们避免从构建的库中导入时它可以工作。
  • 所以看起来这是构建设置的问题（ 之一，，，，，vue.config.js... webpack）babeltypescript

重现错误：

1. 克隆、安装、运行

git clone git@github.com:tholst/vue-composition-api-comp-lib.git && cd vue-composition-api-comp-lib/child-component-lib && npm install && npm run build && cd ../parent-app/ && npm install && npm run serve

或一一

git clone git@github.com:tholst/vue-composition-api-comp-lib.git
cd vue-composition-api-comp-lib/child-component-lib
npm install
npm run build
cd ../parent-app/
npm install
npm run serve

2.打开浏览器

  • 转到 http://localhost:8080/

3. 打开开发工具查看错误

[Vue warn]: Error in data(): "Error: You must use this function within the "setup()" method, or insert the store as first argument."

found in

---> <Anonymous>
       <App> at src/App.vue
         <Root>

错误截图

控制台错误

环境信息：

Node: 14.2.0
npm: 6.14.8
Chrome: 86.0.4240.198

npmPackages:
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    ...    
    @vue/cli-overlay:  4.5.8 
    @vue/cli-plugin-babel: 4.5.8 
    @vue/cli-plugin-router: 4.5.8 
    @vue/cli-plugin-typescript: 4.5.8 
    @vue/cli-plugin-vuex:4.5.8 
    @vue/cli-service: 4.5.8 
    @vue/cli-shared-utils:  4.5.8 
    @vue/component-compiler-utils:  3.2.0 
    @vue/composition-api: 1.0.0-beta.19 
    @vue/preload-webpack-plugin:  1.1.2 
    typescript: 3.9.7 
    vue: 2.6.12 
    vue-loader:  15.9.5 (16.0.0-rc.1)
    vue-router: 3.4.9
    vue-template-compiler: 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vuex: 3.5.1 
    vuex-composition-helpers: 1.0.21 

npmGlobalPackages:
    @vue/cli: 4.5.8
4

1 回答 1

3

我终于明白了问题所在。首先，存在实际问题。其次，本地开发设置中存在问题，导致实际问题的解决方案看起来不起作用。

实际问题+解决方案

child-component-lib 捆绑了他们自己版本的 npm 包@vue/composition-api和vuex-composition-helpers. 这产生了以下效果：当我运行父应用程序时，实际上有这些库的两个实例，并且子组件库中的 vue 组件正在访问未正确初始化的错误对象。

解决方案是防止将这些库捆绑在子组件库中，方法是

  1. 使它们devDependencies和peerDependencies.

  2. 指示 webpack 不要将它们捆绑在npm run build.

    package.json

    "dependencies": {
    ...
},
"devDependencies": {
    "@vue/composition-api": "^1.0.0-beta.19",
    "vuex-composition-helpers": "^1.0.21",
    ...
},
"peerDependencies": {
    "@vue/composition-api": "^1.0.0-beta.19",
    "vuex-composition-helpers": "^1.0.21"
},

    vue.config.js

    configureWebpack: {
    externals: {
        "@vue/composition-api": "@vue/composition-api",
        "vuex-composition-helpers": "vuex-composition-helpers"
    },
    ...
}

使事情变得困难的棘手问题

我试图在本地解决这个问题，但没有实际发布包。它似乎有效，因为我在本地看到了同样的问题，我在已发布的包中也看到了。

我通过直接链接父应用程序和子组件库来进行本地开发。我都试过了

  1. 直接文件夹依赖

    package.json

    "dependencies": {
    "@tholst/child-component-lib": "file:../child-component-lib",
},

  2. npm link

    cd child-component-lib
npm link
cd ../parent-app
npm link @tholst/child-component-lib

这两种方法都具有实际导入（=符号链接）所有文件和文件夹（而不是仅将在 npm 包中发布的文件）的子组件库文件夹的效果。

这意味着以下内容：即使我已从捆绑包中排除了两个组合 API 库并使其成为开发/对等依赖项（请参阅实际问题的解决方案），它们仍然安装并存在于子组件库中node_modules。该node_modules文件夹被符号链接到父应用程序包中。通过这种方式，子组件库仍然可以访问我们想要从构建中排除的库的自己的副本（请参阅实际问题）。而且我仍然像以前一样看到错误。

这样，我的本地开发方法掩盖了实际问题的解决方案确实有效的事实。

于 2020-11-17T20:27:23.507 回答