Question

在这种配置下，我的应用程序在localhost中运行良好，我在localhost中使用XAMMP。但是，当我在装有Linux（ubunto）操作系统的VPS中部署我的应用程序时，出现了此问题。在开始的日子里，它们也可以正常工作，但是最近，当我添加最后一条路线（类别）并进行“ npm运行生产”时，我的路线突然停止工作。

当我单击路由器链接时，URL甚至都没有改变。

我将Web服务器从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: '/' } });

单击路由器链接时出现此错误：

未捕获（承诺）TypeError：无法读取未定义的属性“ call”

，它指向源代码的这一行：

// 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路由器不工作

1 个答案: