const Koa = require("koa");
const KoaWeb = require('koa-web');
const KoaVite = require('koa-vite');
const app = new Koa();
const config = {
path: __dirname,
json: {
layout: "@layout/index"
},
vite: {
server: {
// vite 主机名
host: '0.0.0.0',
// vite 端口
port: 3010,
// 端口暂用退出
strictPort: true,
},
api: {
// koa-web 域名
host: 'localhost',
// koa-web 端口
port: 3000,
// 构建模板， 默认 dist
// dist: '../dist/',
// vite根路径， 默认为空
src: './vite/'
}
}
};
KoaWeb(KoaVite(config));
app.use(KoaWeb(config));
const { api } = config.vite;
app.listen(api.port, () => {
const port = `\x1B[1m${api.port}\x1B[22m`;
const link = `\x1B[36mhttp://${api.host}:${port}/\x1B[39m`;
process.stdout.write(`\n > koa-web: ${link}\n`);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/static/test.js"></script>
</body>
</html><template>
<div class="my">My Test</div>
</template>
<style scoped>
.my {
color: #e23e59;
}
</style><!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/static/test.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Koa-Vite</title>
</head>
<body>
{{ __layout__ | safe }}
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Koa-Vite</title>
</head>
<body>
<div>hello</div>
</body>
</html>