为什么在 Aurelia 生产构建模式下没有创建视图

Question

我尝试在生产模式 (devMode:production) 下构建我的 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>

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

bay.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);
      });
    }
}

bay.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，即使有模块连接，仍然会知道它的视图应该在哪里。

Answer 2

光看bay.ts中的代码，就和句子一样

this._sectionList.forEach(...)

应该改为

_sectionList.forEach(...)

希望这会有所帮助。