使用Vue和Vue Router CDN路由报错：点击Add Employee出现Unexpected token <

我来帮你梳理下问题根源，然后一步步修复这个报错：

问题出在哪？ #

1. require()不被浏览器支持：你在Vue.component('addEmp',{ template:require('./components/addEmp.html') })里用了require()，这是Node.js专属的模块加载语法，浏览器根本不认识这个函数。当浏览器尝试执行这段代码时，会把加载addEmp.html返回的HTML文本（以<开头）当成JS代码解析，自然就抛出Unexpected token <错误。
2. .vue文件无法在CDN环境直接用：.vue单文件组件需要Webpack/Vite这类打包工具编译后才能在浏览器运行，直接通过CDN引用的话，浏览器完全解析不了这种格式。
3. 组件循环引用坑：你定义了var addEmp = {template:"<addEmp></addEmp>"}，同时又注册了<addEmp>组件，这会导致渲染时无限循环，进一步加重错误。

适配CDN环境的修复方案 #

我们调整成浏览器原生支持的写法，完全避开Node.js模块语法：

1. 修改index.html：添加内联模板+完善CDN引入 #

先确保正确引入Vue和Vue Router的CDN，再用<script type="text/x-template">存放组件模板：

<!DOCTYPE html>
<html>
<head>
  <!-- 必须先引入Vue，再引入Vue Router -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/employee">Add Employee</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-link to="/client">Add Client</router-link>
    <!-- 路由渲染出口，必须加上 -->
    <router-view></router-view>
  </div>

  <!-- 把addEmp组件的模板放在这里，Vue能直接识别 -->
  <script type="text/x-template" id="addEmp-template">
    <div id="addEmp">
      <h1>saijal</h1>
    </div>
  </script>

  <script src="index.js"></script>
</body>
</html>

2. 修改index.js：移除require，避免循环引用 #

// 用模板ID引用，代替require加载
Vue.component('addEmp', { 
  template: '#addEmp-template' 
});

// 路由组件直接定义，不要嵌套自己导致循环
var client = { template: "<h1>Client</h1>" };
var addEmpRouteComponent = { template: "<addEmp></addEmp>" };
var contacts = { template: "<h1>Contacts</h1>" };
var dashboard = { template: "<h1>Dashboard</h1>" };

// 完善所有路由规则
var routes = [
  { path: '/', component: dashboard },
  { path: '/employee', component: addEmpRouteComponent },
  { path: '/contact', component: contacts },
  { path: '/client', component: client }
];

var router = new VueRouter({ routes });

// 初始化Vue实例，无需重复$mount
new Vue({
  router,
  el: '#app'
});

3. 处理addEmp.vue文件 #

因为CDN环境无法解析.vue文件，你可以直接删除这个文件，或者把里面的模板内容提取到index.html的内联模板中使用。

关键修改总结 #

• 用<script type="text/x-template">替代require()加载模板，这是Vue在CDN环境下推荐的组件模板写法。
• 避免组件循环引用：路由组件直接使用已注册的全局组件，不要用模板嵌套自己。
• 确保Vue和Vue Router的CDN引入顺序正确（先Vue后Router）。

这样修改后，点击"Add Employee"链接就能正常渲染组件，不会再出现Unexpected token <的错误了。

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