1

我有一个导入 HTML 页面的 vue 组件。

这是我在运行 gulp 任务时遇到的错误。这与默认的 typescript 2.5 可以很好地转换。但是当我通过 browserify 和 tsify 运行它时会爆炸。

错误：找不到模块“detail.html”

这是我的代码

吞咽任务

gulp.task('build:workOrderDetail', function () {
    return browserify("src/WorkOrder/Detail/detail.ts")
        .add("src/html-shim.ts")
        .plugin("tsify", { project: 'tsconfig.json' })
        .bundle()
        .pipe(gulp.dest("dist/workorder-detail.ts"));
});

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "moduleResolution": "node",
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "dist"
  ]
}

组件页面

import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import Template from 'detail.html'

@Component({
})

export default class DetailView extends Vue {
    @Prop() workOrderId: number;
    template: string = Template;
    data() {
        return {
            message: 'hello'
        }
    }
}

html-shim.ts

declare module "*.html" {
    const Content: string;
    export default Content;
}
4

1 回答 1

0

我最终放弃了 Browserify 并使用了 webpack。基本上从这里https://github.com/Microsoft/TypeScript-Vue-Starter/blob/master/webpack.config.js复制并粘贴了配置，改动很小，一切正常！

于 2018-03-01T15:56:33.080 回答