Question

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

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

错误：无法找到模块'detail.html'

这是我的代码

gulp任务

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;
}

Answer 1

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

TSIFY模块找不到html文件。怎么修好？

1 个答案: