为什么未在 Aurelia 生产构建模式中创建视图

Question

我尝试在生产模式（devMode：生产）下构建我的 Aurelia 应用程序。构建成功，但是当通过打开 index.html 运行它时，出现错误“无法确定对象的默认视图策略”。

该应用程序在开发模式下构建并通过打开index.html或执行“au run”在本地运行时运行得很好。

该应用程序由 Aurelia-cli 生成。我尝试关闭 webpack.config.js 中为生产模式设置的每个设置，但没有任何运气。

在我的主应用程序视图模型中，我创建了一个视图模型数组，这些视图模型将在视图中用于创建子组件：

应用程序.ts

...  
let newBayViewModel = new bay(sectionListLeftBay);
this._bayViewModels.push(newBayViewModel);

newBayViewModel = new bay(sectionListRightBay);
this._bayViewModels.push(newBayViewModel);
...

应用程序.html

<div class="bay" repeat.for="bay of bayViewModels">
  <compose view-model.bind="bay"></compose>
</div>

在海湾类中，我创建了一个剖面视图模型数组，这些模型将在海湾视图中界定：

湾.ts

export class bay {
  private _sectionViewModels: section[] = [];
  public get sectionViewModels() : section[] {
    return this._sectionViewModels;
  }

  constructor(
    private _sectionList: string[]) {

      this._sectionList.forEach(sectionName => {
        let newSectionViewModel = new section(sectionName);
        this._sectionViewModels.push(newSectionViewModel);
      });
    }
}

湾.html

<template>
  <div class="section-header" repeat.for="section of sectionViewModels">
      <compose view-model.bind="section"></compose>
  </div>
</template>

如果我删除 bay.ts 中创建剖面视图模型的代码，则不会出现错误，因此问题与该部分有关。可能是什么问题？

我正在使用 aurelia-cli 1.0.0-beta.15、webpack 4.31.0、aurelia-webpack-plugin 4.0.0

Answer 1

您遇到的问题是由于 Webpack 的调试和生产构建之间的不同行为造成的。对于您在开发期间使用的调试构建，所有模块都保持原样，这意味着您的 html 模块是可访问的，因此可以正常工作。对于生产构建，会启动各种优化，其中之一是模块连接。因此，模块的起源（或这些模块的路径）不再保留，因此您无法获得视图模型的起源，从而无法找到您的视图，因为它使用视图模型起源来查找视图 url。

您可以做的是用以下内容装饰您的视图模型useView：

@useView(PLATFORM.moduleName('path/to/my-view'))
export class bay {

}

现在class bay，即使使用模块串联，仍然会有有关其视图应该在哪里的信息。