部署Vue Vite站点时遭遇vue模块解析错误求助

• 核心问题：你部署了项目源码，而非Vite编译后的产物
  Vite执行yarn build后，会在项目根目录生成一个dist文件夹，这里面的所有文件才是可以直接部署到服务器的静态资源。如果你把整个项目文件夹（包括src、vite.config.js这些开发用的源码）传到服务器，直接访问根目录的index.html，浏览器会尝试加载未经过编译的src/main.js——而这个文件里的import Vue from 'vue'是Node.js环境的模块引用方式，浏览器根本识别不了，所以才会抛出"Failed to resolve module specifier 'vue'"的错误。

• 正确操作步骤：

  1. 重新执行yarn build，确保项目根目录下生成了完整的dist文件夹
  2. 只把dist文件夹里的所有内容（不是dist文件夹本身，而是里面的文件和子文件夹）上传到服务器的网站根目录（比如Nginx的html目录、Apache的htdocs目录）
  3. 配置服务器指向这个目录，用http协议访问（不要直接用本地文件浏览器打开index.html）

• 验证方式：
  打开本地dist文件夹里的index.html，查看里面的script标签，应该已经被替换成类似<script type="module" src="./assets/main.xxxxxx.js"></script>的打包后资源路径，而不是你源码里的<script type="module" src="src/main.js"></script>。如果是这样，说明编译没问题，只需要部署dist里的内容即可。

内容的提问来源于stack exchange，提问作者FabricioG