Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”
Three minutes to achieve Vite + Vue3 multi-entry project development
Create a project
# npm 6.x
$ npm init vite@latest <project-name> --template vue
# NPM 7+ requires an extra double dash
$ npm init vite@latest <project-name> -- --template vue
Copy the codePrepare multi-entry files
Create Index entry
Create index.html in the project root directory
<! DOCTYPEhtml>
<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 Index</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index/index.main.js"></script>
</body>
</html>
Copy the codeCreate the index directory under the SRC directory
Create index. vue in the SRC /index directory
<script setup></script>
<template>
<div>Hello Index</div>
</template>
<style></style>
Copy the codeThe SRC /index directory creates index-main.js
import { createApp } from 'vue'
import App from './Index.vue'
createApp(App).mount('#app')
Copy the codeCreate the About entry
The project root directory creates about.html
<! DOCTYPEhtml>
<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 About</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/about/about-main.js"></script>
</body>
</html>
Copy the codeCreate the about directory under the SRC directory
Create about. vue in the SRC /about directory
<script setup></script>
<template>
<div>About</div>
</template>
<style></style>
Copy the codeThe SRC /about directory creates about-main.js
import {createApp} from 'vue'
import App from './About.vue'
createApp(App).mount('#app')
Copy the codeDevelop and configure package.json
{
"scripts": {
"dev": "vite"."build": "vite build"."serve": "vite preview",}}Copy the codeyarn dev
Localhost: 3000 => index Entry page development preview
Localhost: 3000/about.html => about Entry page development preview
Package configuration vite.config.js
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'index.html'),
about: path.resolve(__dirname, 'about.html'),},},}})Copy the codeYarn build packaging
# $ yarn buildYarn Run v1.22.10 Warning package.json: No license field $vite build vite v2.6.5 buildingforproduction... ✓ 13 modules transformed. Dist/about. HTML 0.48 KiB dist/index. The HTML 0.48 KiB dist/assets/index. 03 be285d. 0.22 KiB/js Gzip: 0.20 KiB dist/assets/the about c64be678. Js KiB/gzip 0.22: KiB dist/assets/plugin-vue_export-helper.ad25fb64.js 0.43 KiB dist/assets/vendor. 82 a8318e. Js KiB/gzip 48.81:19.62 KiB ✨ Donein1.48 s.Copy the codeThe packaged dist directory
.├ ─ about.html ├─ assets │ ├─ About.c64BE678.js │ ├─ Plugin-vue_export-help.ad25fb64.js │.c64be678 └── ├─ ├─ ├─ ├─Copy the codeAccess the packaged file YARN serve
Multi-entry project created