Vite.js 应用程序中“main.js”文件的用途是什么？

【问题标题】：What is the purpose of the 'main.js' file in a Vite.js app?Vite.js 应用程序中“main.js”文件的用途是什么？
【发布时间】：2022-01-22 08:29:30
【问题描述】：

我正在构建一个 Vite.js 应用程序，但不确定我是否理解 main.js 文件的用途。我很难在vite docs 中找到对此的明确解释。我发现了一个关于 Vue 应用程序的 S/O 帖子，其中包含 similar question，但不确定答案是否也适用于 Vite。

我不熟悉使用这些前端构建工具以及一般模块，并希望确保我了解正在发生的事情。我知道 index.html 在开发过程中作为应用程序的入口点，但是 main.js 的目的究竟是什么？

我的文件结构如下：

├── package.json
├── vite.config.js
├── index.html
├── main.js
├── styles.css
├── pages
│   ├── login
│   │   ├── login.html
│   │   ├── login.js
│   ├── home
│   │   ├── home.html 
│   │   ├── home.js
│   │

【问题讨论】：

标签： javascript vite

【解决方案1】：

在main.js 中创建应用实例，对其进行配置，然后将其挂载到divtag。这是任何vue3 应用程序的前进方向，并且独立于使用的捆绑工具（例如vite）。 main.js的典型示例如下：

import {createApp} from 'vue'

import store from './store.js'
import router from './routes.js'
import i18n from './i18n.js'
import App from '../components/App.vue'


// mount is the last one ...
const myApp = createApp(App);
myApp.use(store)
    .use(router)
    .use(i18n)
    .mount('#app');

在index.html 中，您将加载此main.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>MyApp</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <meta name="theme-color" content="#ffffff">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/js/main.js"></script>
</body>
</html>

【讨论】：