Vue3 +Vite项目部署遇见的问题

项目场景：

Vue3 + Vite部署单页。
参考链接：

• Vue3
• Vite
• JavaScript

---

问题描述

在部署Vue3项目时，敲入命令npm run dev，显示Vite不是内部或外部命令。

原因分析：

找不到Vite可执行程序，没有安装。

---

解决方案：

使用vite创建vue3.0项目的时候，vite不会自动 install 相关的依赖，需要手动安装。项目目录下并没有node_modules文件夹。

出现这个问题的原因：缺少安装依赖这一步。vite不像 node 或 vue cli，会自动帮助我们执行 npm i (install) 命令去下载相关依赖，需要手动下载。

执行以下指令，等待 npm 将依赖下载完成后在尝试运行项目：

npm i

执行构建项目：

npm run dev

问题描述

如何把Vue3项目部署到生产环境？

解决方案：

当你准备将应用发布到生产环境时，请运行：

npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

点击index.html，发现是没法正常显示的。
如果直接在浏览器中打开了上面的 index.html，你会发现它抛出了一个错误，因为 ES 模块不能通过 file:// 协议工作，也即是当你打开一个本地文件时浏览器使用的协议。
由于安全原因，ES 模块只能通过 http:// 协议工作，也即是浏览器在打开网页时使用的协议。为了使 ES 模块在我们的本地机器上工作，我们需要使用本地的 HTTP 服务器，通过 http:// 协议来提供 index.html。
要启动一个本地的 HTTP 服务器，请先安装 Node.js，然后通过命令行在 HTML 文件所在文件夹下运行 npx serve。你也可以使用其他任何可以基于正确的 MIME 类型服务静态文件的 HTTP 服务器。

使用

npx serve

启动本地HTTP服务器后，就可以访问了。

问题描述

vue通过v-if隐藏的元素在网页加载时闪现

解决方案：

通过vue里面的指令v-cloak就能解决这个问题啦，这个指令的作用就是让js文件加载完成时让你的元素有一个预样式，加载完成再替换掉它

在里面添加预样式：

<style> [v-cloak] {
    display: none;
  }

在需要添加预样式的元素绑定v-cloak指令：

 <div id="app" v-cloak>
 
 
 </div>

https://blog.csdn.net/weixin_45273478/article/details/124457198