JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
</head>
<body>
<div id="app">
<app-content></app-content>
</div>
<script src="./api/server.js"></script>
<script>
const routes = [
{
path: "/",
name: 'login',
component: httpVueLoader("./view/app-content.vue"),
meta: {
needLogin: true
}
},
{
path: "/dashboard",
name: 'dashboard',
component: httpVueLoader("./view/dashboard.vue"),
meta: {
needLogin: true
}
},
{
path: "/transaction",
name: 'transaction',
component: httpVueLoader("./view/transaction.vue"),
...
JavaScript
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<httpRedirect enabled="false" destination="http://ec-tpwas8-dev" />
<directoryBrowse enabled="true" />
<handlers accessPolicy="Read, Execute, Script" />
<staticContent>
<mimeMap fileExtension=".*" mimeType="text/html" />
<mimeMap fileExtension=".vue" mimeType="application/javascript"/>
</staticContent>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/dist/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>