vite 搭建双入口

由于不想把登录的路由写到路由中需要两个入口页面

复制一份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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

新建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'); 

1
2
3
4
5
6
7
8
9
10
11

新建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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

根据官网多页面应用模式

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')
      }
    }
  }
...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

启动服务输入
http://127.0.0.1:5173/login.html 就成功了

相关阅读:
Vue 3的革命性新特性：深入了解Composition API
2022年十大知名堡垒机品牌你真的知道吗？
OpenCV之cv::createTrackbar
lua循环
GC FullGC
QT国际化
【EMC专题】EMC是常规设计准则的例外情况
选择排序--python(详解)
2022-08-19 第六小组瞒春学习笔记
微信小程序入门

原文地址：https://blog.csdn.net/weixin_43957384/article/details/128023503