Vue роутер не работает при добавлении нового маршрута - PullRequest
Новая
       10

Vue роутер не работает при добавлении нового маршрута

0 голосов
/ 17 октября 2018

Мое приложение отлично работает в localhost с этой конфигурацией, я использую XAMMP в localhost.но когда я развернул свое приложение на VPS с ОС Linux (ubunto), у меня возникла эта проблема.В первые дни они тоже работали нормально, но недавно, когда я добавил последний маршрут (категории) и выполнил 'npm run production', мои маршруты внезапно перестали работать.

Когда я нажимаю на ссылку маршрутизатораURL даже не меняется.

Я изменил свой веб-сервер с nginx на apache, но это не имеет значения.мои маршруты такие: 

const Index = resolve => {
   require.ensure(['./frontend-components/main-content/index'], () => {
      resolve(require('./frontend-components/main-content/index'));
   });    
};
const news = resolve => {
   require.ensure(['./frontend-components/single/news'], () => {
       resolve(require('./frontend-components/single/news'));
   });    
};
const lists = resolve => {
    require.ensure(['./frontend-components/single/lists'], () => {
        resolve(require('./frontend-components/single/lists'));
    });    
};
const categories = resolve => {
   require.ensure(['./frontend-components/single/categories'], () => {
       resolve(require('./frontend-components/single/categories'));
   });    
};

export const routes = [
    {path: '/', component: Index},
    {path: '/articles/:article_id/:slug',component: news,name: 'articles'},
    {path: '/lists/:article_id/:slug',component: lists,name: 'lists'},
    {path: '/categories/:cat_id/:slug', component: categories},
]

и моя конфигурация веб-пакета: 

const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/fr-app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/fr-app.scss', 'public/css')
   .sass('resources/assets/sass/admin.scss', 'public/css')
   .options({processCssUrls: false})
   .webpackConfig({ output: { filename: '[name].js', chunkFilename: 
    'js/[name].app.js', publicPath: '/' } });

У меня появляется эта ошибка, когда я нажимаю на ссылку маршрутизатора:

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'call' из неопределенного

, и оно ссылается на эту строку в исходном коде: 

// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

1 Ответ

0 голосов
/ 18 октября 2018

require.ensure - это устаревший синтаксис Webpack, который заменяется import.И, как указал @Phil, resolve => {/*...*/} сам по себе не создает Promise, что необходимо для ленивых загрузочных маршрутов.Вы, вероятно, имели в виду что-то вроде этого: 

const foo = new Promise(resolve => {
  require.ensure( './path/to/foo', () => resolve(require('./path/to/foo')) );
});
const routes = [
  {
    path: '/foo',
    component: foo
  }
];

Тем не менее, документы vue-router рекомендует синтаксис import для маршрутов отложенной загрузки: 

const routes = [
  {
    path: '/foo',
    component: () => import('./path/to/foo')
  }
];

демо

...