Day_10 : 让 Vite 来开启你的Vue 之 结构目录

Hi Dai Gei Ho~ 我是Winnie～ 终於，我撑过中秋连假殒落的危险，走向 白洞，白色的明天，来到了文章的第十篇。

而在此篇的文章内容中，我们要来说说 Vite 的 目录结构 与 执行模式

首先，大家可以照着以下指令给他yarn下去，如果之前有 yarn 过一个专案就不用再 yarn 了(谁没young过XD)

 //yarn
 yarn create vite

择一

  //npm
  npm init vite@latest

打开专案後，我们来先来看看 Vite 初始的目录结构(以Vue为例)：

├── README.md
├── index.html //放置於根目录
├── node_modules
├── package.json
├── public
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   └── main.js 
├── vite.config.js
└── yarn.lock

从上方，我们可以看到Vite目录结构相当简洁，其中不同於vue-cli将index.html 放置在 public 中，而 vite 将 index.html 放置在根目录中，这是为什麽呢？ˋ

针对这个疑问，在官方文件中是这样解释的，将index.html放在根目录，这是Vite特意设计的，因为在开发期间 Vite 角色是一个 server，而index.html为 Vite的进入点(entry point)，同时也把它视为 模组关系图 的一部分。

而针对MPA多页面的应用模式，在这边 Vite 也支持 多个HTML 作为进入点，如何设定我们也会在接下的章节 Vite config 配置文章中做介绍。

如果我今天想改变进入点位置呢？

虽然Vite 在预设的进入位置为根目录来启动，但不用担心，如果今天想更换路径，也能透过 config 来进行配置，同样地，要如何指定替代的根目录我们也将会在下篇 Vite config 配置一并来做介绍

执行环境模式

接着我们再看看根目录下的package.json，其中里面的 scripts 中有三个脚本 分别如下：

  "scripts": {
   "dev": "vite",
   "build": "vite build",
   "serve": "vite preview"
 }

第一个 dev 模式相信大家不会太陌生，其指令主要是运用在专案开发时，我们在专案路径下输入指令 yarn dev or npm run dev就可以启动 dev-server 。

而接下来两个指令 yarn build 与yarn serve 我们可以将其设为一组，主要会在部署网站 前依序执行这两个指令。

首先，当我们 执行 yarn build时，Vite 进行程序码的打包，而在预设情况下，打包後的档案会放置在根目录 中的dist资料夹中，同时每只打包过的档案前都会有自己独立的hash。

略..
├── dist
│   ├── assets
│   │   ├── index.864e05cc.js
│   │   ├── index.f51547ab.css
│   │   └── vendor.84e3b79e.js
│   ├── favicon.ico
│   └── index.html
略..

接着当打包完成後，我们可以执行 yarn serve，而 vite preview 指令会在 本地启用一个静态Web server，将dist 中的文件 运行在预设的http://localhost:5000，这样就可以在local环境下，预先检查打包的内容是否可以正常使用了，以免正式部署出现错误，等於是一个预演的动作。

以上是今天的文章，谢谢大家的阅读，如有错误欢迎指教，谢谢。