默认Vue项目配置Apache虚拟主机后，import vue模块报错求助

问题原因 #

你用npm init vue@latest创建的默认Vue项目基于Vite构建：

• 执行npm run dev时，Vite作为开发服务器会自动处理import { createApp } from 'vue'这类裸模块导入，把它映射到node_modules里的Vue文件路径，浏览器能正常识别。
• 但直接把项目源码放到Apache上访问时，浏览器用原生ES模块规则解析，它只认带/、./、../开头的路径，不认识vue这种裸模块名，只会在当前目录找对应文件，自然找不到就报错。

解决步骤 #

1. 构建生产版本：在项目根目录执行命令

   npm run build
   

   Vite会把所有模块打包成浏览器可直接识别的静态文件，输出到dist文件夹。
2. 部署构建产物：把dist文件夹里的所有内容，放到Apache虚拟主机的根目录下，不要直接部署项目源码。
3. 验证Apache配置：确保虚拟主机的DocumentRoot指向dist目录，并且Apache已开启静态文件服务。

补充说明 #

如果是开发阶段临时预览，也可以用Vite自带的预览服务：

npm run preview

生产环境强烈建议使用构建后的dist文件，既解决模块解析问题，也能提升加载性能。

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