Asp.net mvc 如何在带有typescript的少数html页面中使用vuejs 2&；Net内核

我有一个带有razor视图的ASP.Net核心MVC，它在需要更复杂时使用VueJs2

我想每个视图有一个js文件

我的文件夹结构如下所示：

├ Controllers\HomeController.cs (with actions Index & Details)
├ Scripts\Home\index.ts
├ Scripts\Home\details.ts
├ Views\Home\Index.cshtml
├ Views\Home\Details.csthml
├ wwwroot\lib\vue
├ wwwroot\js\Home\index.js (generated with typescript)
├ wwwroot\js\Home\details.js (generated with typescript)
├ tsconfig.json

这是我的tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js",
    "rootDir": "Scripts",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ]
  },
  "include": [
    "wwwroot/lib/vue/typings",
    "Scripts"
  ],
  "compileOnSave": true
}

我的index.ts文件

import Vue from 'vue'

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

以及生成的文件：

"use strict";
var vue_1 = require("vue");
var app = new vue_1.default({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
//# sourceMappingURL=index.js.map

---

在我的Index.cshtml中，我加载了js文件，但是我的浏览器中没有这个require指令

---

如何使此js文件在浏览器中工作？

注意，在您的tsconfig.json中，由于您没有指定

“模块”

设置，因此默认为

“commonjs”

，请明确指定此值或其他值（见下文）

这里的问题是浏览器还没有广泛支持模块。那些确实有不完整的初步支持。为了在浏览器中使用模块，您需要一个加载器或分装器

实体选项包括SystemJS（可选jspm）、RequireJS、Webpack或Browserify

一些注意事项：

在您的tsconfig.json的

“编译器选项”

如果使用SystemJS，则设置“模块”：“系统”

设置

“模块”：“amd”

并删除

“allowSyntheticDefaultImports”

，如果您使用RequireJS

设置

“模块”：“commonjs”

如果您使用Webpack

---

设置

“模块”：“commonjs”

并删除

“allowSyntheticDefaultImports”

，如果您使用Browserify。

“此require指令在我的浏览器中不起作用。”-您遇到了什么错误？