My ASP.Net Core MVC project utilizes VueJs2 for more complex tasks, with each view having its own corresponding js file.
The directory structure is as follows:
├ 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 using typescript)
├ wwwroot\js\Home\details.js (generated using typescript)
├ tsconfig.json
Here is the content of my tsconfig.json file:
{
"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
}
The index.ts file contains the following code snippet:
import Vue from 'vue'
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
And the resulting generated file looks like this:
"use strict";
var vue_1 = require("vue");
var app = new vue_1.default({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
//# sourceMappingURL=index.js.map
Unfortunately, the 'require' instruction in the Index.cshtml file is not functioning properly in browsers. How can I ensure that these js files work correctly within the browser?