Question

我想将打包为npm节点模块的vue组件动态导入到vue.js应用程序的包装器组件中。我要导入的组件位于自定义npm软件包中。我首先使用vue cli创建了vue组件，然后将它们制成npm软件包，将这些软件包发布到npm，然后将它们安装到此应用程序中。我想导入由vue路由器代码中的参数指定的组件，如下所示。如您所见，此参数在动态import语句的相对路径内串联。

简而言之，导入的组件是一个插件。如果我可以使用它，那么不管用户添加到应用程序的插件数量或这些插件的名称如何，它都应该继续起作用。

我不明白自己所看到的错误，也不知道如何解决该错误。

这是我的包装器组件...

<div>
    <div v-if="loadedTool">
        <component :is="loadTool"></component>
    </div>
</div>
</template>

<script>
export default {
    name: "ToolWrapper",
    data() {
        return {
            toolname: "",
            loadedTool: false
        }
    },

    computed: {
        loadTool() {
            console.log("toolname: "+this.toolname);
            return () => import('../../node_modules/'+this.toolname+'/src/App.vue');
        }
    },
    created() {
        this.toolname = this.$route.params.toolname;
        this.loadedTool=true;
    }
}
</script>

<style>

</style>

这是我的router.js文件中的相关代码...

                {
                    path: 'toolwrapper/:toolname',
                    name: 'ToolWrapper',
                    component: ToolWrapper
                }

这是将参数传递到vue路由器代码中的代码...

                  <router-link :to="{name: 'ToolWrapper', params: {toolname: tool.filename}}">{{tool.toolname}}</router-link>

最后，这是我继续看到的错误消息...



 error  in ./node_modules/@vue/cli-service/generator/template/src/App.vue?vue&type=style&index=0&lang=stylus&

Module build failed (from ./node_modules/stylus-loader/index.js):
ParseError: C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\@vue\cli-service\generator\template\src\App.vue:94:5
   90|   -webkit-font-smoothing antialiased
   91|   -moz-osx-font-smoothing grayscale
   92|   text-align center
   93|   color #2c3e50
   94|   <%_ if (!rootOptions.router) { _%>
-----------^
   95|   margin-top 60px
   96|   <%_ } _%>
   97| <%_ if (rootOptions.router) { _%>

expected "indent", got "%"

    at Parser.error (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:259:11)
    at Parser.expect (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:287:12)
    at Parser.block (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:845:12)
    at Parser.selector (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:1555:24)
    at Parser.stmt (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:797:27)
    at Parser.statement (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:685:21)
    at Parser.block (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:865:21)
    at Parser.selector (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:1555:24)
    at Parser.stmt (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:797:27)
    at Parser.statement (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:685:21)
    at Parser.parse (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\parser.js:236:25)
    at Renderer.render (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus\lib\renderer.js:80:22)
    at C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\stylus-loader\index.js:167:12
    at tryCatchReject (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\when\lib\makePromise.js:840:30)
    at runContinuation1 (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\when\lib\makePromise.js:799:4)
    at Fulfilled.when (C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\node_modules\when\lib\makePromise.js:590:4)

 @ ./node_modules/@vue/cli-service/node_modules/vue-style-loader??ref--11-oneOf-1-0!./node_modules/css-loader??ref--11-oneOf-1-1!./node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--11-oneOf-1-2!./node_modules/stylus-loader??ref--11-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./node_modules/@vue/cli-service/generator/template/src/App.vue?vue&type=style&index=0&lang=stylus& 4:14-425 14:3-18:5 15:22-433
 @ ./node_modules/@vue/cli-service/generator/template/src/App.vue?vue&type=style&index=0&lang=stylus&
 @ ./node_modules/@vue/cli-service/generator/template/src/App.vue
 @ ./node_modules lazy ^\.\/.*\/src\/App\.vue$ namespace object
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/ToolWrapper.vue?vue&type=script&lang=js&
 @ ./src/components/ToolWrapper.vue?vue&type=script&lang=js&
 @ ./src/components/ToolWrapper.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.0.0.163:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js


 WARN  
Couldn't parse bundle asset "C:\Users\User\Documents\Work\Dieselpoint\groundlist\groundlist.admin\dist\0.js".
Analyzer will use module sizes from stats file.

此错误是什么意思，我该如何解决？经常会出现此错误，但并非总是如此。有时，代码实际上确实会导入组件。

干杯！ -基甸

无法动态导入名称包含路由器参数的Vue组件

0 个答案: