Ошибка при создании vue приложения

125
02 октября 2019, 05:40

Пытаюсь создать vue приложение. За основу роутинга взял vue-router. Пишу в app.js следующий код:

import Vue from 'vue' 
import VueRouter from 'vue-router' 
 
Vue.use(VueRouter) 
 
import App from './views/App' 
import Main from './views/Main' 
 
const router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
        { 
            path: '/', 
            name: 'main', 
            component: Main 
        }, 
    ], 
}); 
 
const app = new Vue({ 
    el: '#app', 
    components: { App }, 
    router, 
});

И соответственно в фаил App.vue:

<template> 
    <div> 
        <h1>Vue Router Demo App</h1> 
 
        <p> 
            <router-link :to="{ name: 'main' }">Home</router-link> | 
        </p> 
 
        <div class="container"> 
            <router-view></router-view> 
        </div> 
    </div> 
</template> 
<script> 
    export default {} 
</script>

И фаил Main:

<template> 
    <p>This is main template/p> 
</template>

Но при запуске приложения у меня следующая ошибка:

Uncaught Error: Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): RangeError: Invalid string length at repeat$1 (:8080/home/user/Документы/development/spabrutaltree/node_modules/vue-template-compiler/build.js:4579) at Object.generateCodeFrame (:8080/home/user/Документы/development/spabrutaltree/node_modules/vue-template-compiler/build.js:4561) at loaderContext.emitError.compiled.errors.map (:8080/home/user/Документы/development/spabrutaltree/node_modules/vue-loader/lib/loaders/templateLoader.js:64) at Array.map () at Object.module.exports (:8080/home/user/Документы/development/spabrutaltree/node_modules/vue-loader/lib/loaders/templateLoader.js:63) at repeat$1 (:8080/home/user/Документы/development/spabrutaltree/node_modules/vue-template-compiler/build.js:4579) at Object.generateCodeFrame (:8080/home/user/Документы/development/spabrutaltree/node_modules/vue-template-compiler/build.js:4561) at loaderContext.emitError.compiled.errors.map (:8080/home/user/Документы/development/spabrutaltree/node_modules/vue-loader/lib/loaders/templateLoader.js:64) at Array.map () at Object.module.exports (:8080/home/user/Документы/development/spabrutaltree/node_modules/vue-loader/lib/loaders/templateLoader.js:63) at Object../node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/Main.vue?vue&type=template&id=2ad93e50& (app.js:629) at webpack_require (app.js:20) at Module../resources/js/views/Main.vue?vue&type=template&id=2ad93e50& (app.js:15428) at webpack_require (app.js:20) at Module../resources/js/views/Main.vue (app.js:15393) at webpack_require (app.js:20) at Module../resources/js/app.js (app.js:15291) at webpack_require (app.js:20) at Object.0 (app.js:15453) at webpack_require (app.js:20)

В чем проблема?

Answer 1

У меня тоже она возникла. Причём интересно, что при компиляции на локальных компьютерах (Ubuntu) всё в порядке, а на одном серверном окружении (CentOS Linux 7) с теми же условиями компиляции - ошибка. (Там и там - последние NodeJS.)

Она оказалась в node_modules/vue-template-compiler/build.js и в node_modules/vue-template-compiler/browser.js действительно, в функции repeat$1. При втором параметре, меньшем 0 она даёт эту ошибку. В исходном пакете последней версии 2.6.6 - не исправлена, 2.5.17 - тоже. Чтобы не возникала, надо функцию записать так (например):

function repeat$1 (str, n) {
  var result = '';
  while (true) { // eslint-disable-line
    // if (n & 1) { result += str; }
    // n >>>= 1;
    // if (n <= 0) { break }
    if(str.length >280 || (n && (result += str), (n >>>= 1) <= 0)) break;
    str += str;
  }
  return result
}

Или патчил сжатую функцию так:

function Ra(e,t){for(var n="";;){if(e.length >280 || (t && (n += e), (t >>>= 1) <= 0))break;e+=e}return n}

В процессе работы выполнение кода repeat$1('^',-1) приводило к ошибке, в пропатченном варианте - нет.

Answer 2

При создании объекта вью не видно, что ты ему говоришь, что внутри его темплейта есть компонент App. Попробуй прописать жесткий render:

const app = new Vue({
    el: '#app',
    components: { App },
    router,
    render: h => h(App)
});
READ ALSO
Svg код исчезает в canvas

Svg код исчезает в canvas

Можете запустить и посмотреть,и увидите что часть кода когда заходит на canvas просто исчезает а должна отображаться можно это как нибудь сделать?...

129
Как не отправлять по форме пустые данные? [закрыт]

Как не отправлять по форме пустые данные? [закрыт]

Отправляю по GET запросу форму, URL Очень длинный от того что отправляются пустые данные, на стороне сервера они (null)

115
Как хранить в БД комментарии с ответами?

Как хранить в БД комментарии с ответами?

У меня в бд комментарии хранятся следующим образом: каждая строка - это отдельный комментарий, а в атрибутах у этого комментария указывается,...

141