Vue3+Vite项目vue模块解析报错及资源404问题求助

一、模块解析错误（import { createApp } from 'vue'报错） #

• 检查Vite配置文件（vite.config.js/vite.config.ts）：
  • 确认resolve.alias是否正确配置Vue别名，避免路由配置时误改相关项：

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import path from 'path'
    
    export default defineConfig({
      plugins: [vue()],
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          'vue': 'vue/dist/vue.esm-bundler.js'
        }
      }
    })
    

• 重置项目依赖：
  • 执行yarn install重新安装依赖，排查是否存在依赖包损坏或缺失情况；同时确认package.json中vue与@vitejs/plugin-vue版本兼容。
• 验证HTML入口脚本类型：
  • 确保入口HTML的脚本标签为type="module"，否则浏览器会按传统方式解析模块，无法识别裸模块：

    <script type="module" src="/src/main.js"></script>
    

二、静态资源404问题（http://127.0.0.1:5500/icon.svg找不到） #

• 确认开发服务端口：
  • Vite默认开发端口为5173，若请求端口为5500，大概率是启动了其他服务（如VSCode Live Server）而非Vite服务。执行yarn dev启动Vite，使用控制台输出的正确地址访问项目。
• 规范资源引用方式：
  • 组件内引用静态资源优先使用相对路径或Vite别名，避免硬编码端口路径：

    <img src="@/assets/icon.svg" alt="icon" />
    

    或

    <img src="./icon.svg" alt="icon" />
    

• 核实资源位置：
  • 检查icon.svg是否存在于预期目录，排查是否在路由配置过程中被误删或移动。

三、额外排查项 #

• 强制刷新浏览器缓存（Ctrl+Shift+R），避免旧解析规则残留。
• 检查路由配置文件语法：路由文件的隐性语法错误可能导致Vite编译异常，间接影响模块与资源加载。

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