Vue项目npm start报相对模块未找到及assets图片加载失败如何解决

1 修复相对模块未找到报错 #

报错的根本原因有两个：

• 路径书写错误：main.js已经位于src目录下，你写的引入路径./src/router/index.js会被解析为src/src/router/index.js，和实际文件路径不匹配。
• 路由文件缺少导出：你贴的router/index.js代码末尾没有导出路由实例，就算路径正确也会报错。

修改步骤 #

1. 修改main.js中router的引入代码：
   将

import router from './src/router/index.js'

替换为

import router from './router'

（webpack会自动识别目录下的index.js文件，可省略后缀和文件名）

2. 在router/index.js代码末尾添加导出语句：

export default router

2 node_modules灰色说明 #

该现象是IDE的正常提示，说明node_modules文件夹被配置在.gitignore的忽略提交列表中，无需做任何处理，和你遇到的报错无关联。

3 修复assets图片无法加载问题 #

assets目录下的资源会被webpack打包处理，需要按照规则书写路径：

• 若在template的img标签中使用：
  • 相对路径写法（假设你的组件在src/components目录下）：

  <img src="../assets/你的图片文件名.png">
  

  • 别名写法（vue-cli默认配置@指向src目录）：

  <img :src="require('@/assets/你的图片文件名.png')">
  

• 若在style中作为背景图使用：

  .xxx {
    background: url(~@/assets/你的图片文件名.png);
  }
  

  路径前加~标识webpack会按模块路径规则解析。

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