如何修复Vue Router <router-view>未知组件及main.js语法报错问题

1. 解决 main.js 首行 Unexpected token '<' 报错 #

该报错是因为你在 index.html 中手动引入了未经过打包编译的 main.js 源码，浏览器无法直接识别包含 ES6 导入语法的 js 文件；同时单页应用默认配置下，访问不存在的静态资源路径时服务端会返回 index.html 的内容，导致解析时遇到 html 开头的 < 符号触发语法错误。
修复操作：
删除 index.html 末尾手动添加的 <script src="main.js"></script> 代码即可。你项目已经配置了 html-webpack-plugin，打包工具会自动将编译后的 js 资源注入到 html 文件中，不需要手动引入。

2. 解决 Unknown custom element 组件注册报错 #

该报错由模块导入导出语法不统一、重复注册组件两个问题共同导致，按以下步骤修改：

步骤1：移除 App.vue 中的冗余代码 #

你已经在 main.js 中全局注册了 navigation 组件，也已经将 router 注入到根 Vue 实例，App.vue 中不需要重复导入和注册这两个内容，修改后的 App.vue script 部分如下：

<script>
export default {
  name: 'App'
}
</script>

步骤2：统一模块导出语法为ES6规范 #

当前项目混用了 CommonJS 和 ES6 模块语法，会导致模块识别异常：

• 打开 router.js，将末尾的 module.exports = router; 替换为 export default router;
• 打开 Navigation.vue，将 script 部分的 module.exports = { 替换为 export default {

步骤3：（可选）规范组件命名 #

全局注册组件时建议使用大驼峰命名，避免大小写敏感导致的识别问题，可将 main.js 中的组件注册代码调整为：

import Navigation from './components/Navigation.vue'
Vue.component('Navigation', Navigation)

对应 App.vue 模板中使用 <Navigation></Navigation> 调用即可。

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