添加新路由时 Vue 路由器不工作

Question

使用此配置，我的应用程序在本地主机中运行良好，我在本地主机中使用 XAMMP。但是当我使用 Linux (ubunto) OS 在 VPS 中部署我的应用程序时，我遇到了这个问题。在最初几天他们也工作得很好，但最近当我添加最后一条路线（类别）并执行 'npm run production' 我的路线突然停止工作。

When I click on a router-link the URL doesn't even change.

我将网络服务器从 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},
]

我的 webpack 配置是：

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: '/' } });

点击路由器时出现这个错误-link:

Uncaught (in promise) TypeError: Cannot read property 'call' of undefined

它指向源代码的这一行：

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

Answer 1

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 docs推荐延迟加载路由的import语法：

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

demo

添加新路由时 Vue 路由器不工作

Vue router is not working when new route added

laravel

webpack

vue.js

vue-router

vuejs2