由于不想把登录的路由写到路由中 需要两个入口页面
复制一份index.html,改为login.html
为了两个区分，改一下 titile，和script的src
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/login.ts"></script>
</body>
</html>
新建login.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css'
import Login from '@/views/login/login.vue'
const app = createApp(Login)
app.use(ElementPlus);
app.mount('#app');
新建login/login.vue
<template>
<div>
<el-button type="primary" @click="login">Primary</el-button>
<div>{{count}}</div>
</div>
</template>
<script lang="ts" setup>
import {ref } from 'vue';
const count = ref<number>(4);
let login = async () =>{
count.value ++;
};
</script>
<style scoped>
</style>
根据官网多页面应用模式
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
export default defineConfig({
...
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'index.html'),
login: path.resolve(__dirname, 'login.html')
}
}
}
...
}
启动服务 输入
http://127.0.0.1:5173/login.html 就成功了
6036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
