Не удается динамически импортировать компонент vue, имя которого содержит параметр маршрутизатора - PullRequest
Новая
       45

Не удается динамически импортировать компонент vue, имя которого содержит параметр маршрутизатора

0 голосов
/ 04 июня 2019

Я хочу динамически импортировать компонент vue, упакованный как модуль узла npm, в компонент оболочки в приложении vue.js.Компоненты, которые я хочу импортировать, находятся в пользовательских пакетах npm.Сначала я создал компоненты vue с помощью vue cli, затем превратил их в пакеты npm, опубликовал пакеты в npm и затем установил их в это приложение.Я хочу импортировать компонент, указанный параметром в коде маршрутизатора vue, как показано ниже.Как видите, этот параметр объединяется в относительном пути в динамическом операторе импорта.

В двух словах, импортируемый компонент является плагином.Если я смогу заставить это работать, то оно должно продолжать работать независимо от количества плагинов, которые пользователь добавляет в приложение, или имен этих плагинов.

Я не понимаю, какую ошибку я вижу или знаюкак решить эту ошибку.

Вот мой компонент оболочки ... 

<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.

Что означает эта ошибка и как я могу ее решить?Эта ошибка появляется довольно часто, но не всегда.Иногда код действительно импортирует компоненты.

Приветствия!-Gideon

...