vue vite 多页面应用与vue cli多页面应用 (MPA)及其比较(避坑)

修改预告

警告：本结构可能存在打包不成功或者是静态资源缺失问题，vite打包与部署问题已经解决，

vite项目的打包与IIS部署已经修改，本篇不做修改，本篇文章做旧参考，查看修改文章，请移步这里。

vue3 cli 本人已经放弃，官方已经不再维护，我也就不想学了，不再使用，文章仅作参考，懒得改。vite请移步上面链接

1.vue-vite 安装应用

npm create vite@latest

确定名称后 选择vue 语言选择 JS，根据提示进入项目【cd 名称】，然后安装依赖【npm i】

  cd vite_pages
  npm install
  npm run dev

如果有警告版本，检查一下node版本[ node  -v ] 因为vite对版本有要求，node -v。 最新的vite要求18+或20+，如果不对应，node官网下载更新。再次执行npm install后更新,无警告。

然后npm run dev 启动示例应用，后面改造在vscode下面进行。

2.vue-vite 多页面应用改造

2.1.vite改造多页面

vue-vite默认项目是这样的

很多文章对多页面应用的解释需要对vite.config.js  编译路径root配置,然后配置build的路径。本人对root和修改后的路径不了解，因此怎么也配不对。在阅读下面的文章后，最终修改成功。参考：

真正优雅的vite多页面实战 - 掘金 (juejin.cn)

所以建议不要随便修改root,当然我对打包的配置也还不懂，因此本文章的结构和配置不一定适合打包，有需要后面再次探索打包配置。改造后的文件是所有的HTML放在根目录，在src下面新建pages，如下图左，pages新建文件夹与html一一对应，每个文件一样包含css,js,views三个文件夹和app.vue、main.js，如下图右：

本人在根目录新建了about、index、home、三个页面，src/pages对应