Vue.js中引入主题文件：HTML模板组件JS引入报错及按需加载咨询

一、解决SyntaxError: expected expression, got '<'错误 #

这个错误的核心原因是浏览器请求你的JS文件时，返回的不是有效的JS代码，而是HTML内容（最常见的是404错误页面）。当浏览器尝试把HTML解析成JS时，就会因为遇到<符号而抛出语法错误。你可以按以下步骤排查和解决：

• 检查文件路径是否正确
  Vue项目的静态资源引用规则分两种情况：

  1. 如果是vue-cli 3+版本，静态资源应该放在public目录下，在index.html中引用时要使用根路径开头的绝对路径。比如把你的assets/plugins文件夹移到public目录下，然后引用路径改成：

     <script src="/plugins/pace/pace.min.js" type="text/javascript"></script>
     <script src="/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
     <script src="/plugins/modernizr.custom.js" type="text/javascript"></script>
     

  2. 如果是旧版vue-cli（使用static目录），则路径要对应static下的位置，比如/static/assets/plugins/...。

• 验证请求返回内容
  打开浏览器开发者工具的「Network」标签，刷新页面后查看这几个JS文件的请求状态：

  • 如果状态码是404，说明文件路径完全错误，需要调整路径到正确的文件位置。
  • 如果状态码是200，但预览内容是HTML（比如你的项目首页或404页面），说明路由配置或服务器配置有问题，导致请求JS文件时被重定向到了HTML页面。

二、为特定组件（如登录组件）按需加载JS文件 #

如果不想在全局加载这些JS，只想在登录组件中使用，可以用以下两种方案：

方案1：动态创建script标签（适合本地自定义脚本或非npm包） #

在登录组件的生命周期钩子中动态加载脚本，组件卸载时还可以清理这些脚本：

<template>
  <!-- 登录组件内容 -->
</template>

<script>
export default {
  name: 'Login',
  async mounted() {
    // 封装加载脚本的函数
    const loadScript = (src) => {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.type = 'text/javascript';
        // 脚本加载成功/失败的回调
        script.onload = () => resolve();
        script.onerror = (err) => reject(err);
        document.body.appendChild(script);
      });
    };

    try {
      // 按顺序加载所需脚本（如果有依赖顺序，比如jQuery要先于依赖它的脚本）
      await loadScript('/plugins/jquery/jquery-1.11.1.min.js');
      await loadScript('/plugins/pace/pace.min.js');
      await loadScript('/plugins/modernizr.custom.js');

      // 脚本加载完成后，执行初始化逻辑
      window.Pace?.start();
      // 这里可以写依赖jQuery的代码，比如 $('.some-element').doSomething()
    } catch (err) {
      console.error('脚本加载失败:', err);
    }
  },
  beforeUnmount() {
    // 组件卸载时，移除已加载的脚本，避免内存泄漏
    const scriptUrls = [
      '/plugins/jquery/jquery-1.11.1.min.js',
      '/plugins/pace/pace.min.js',
      '/plugins/modernizr.custom.js'
    ];
    scriptUrls.forEach(url => {
      const script = document.querySelector(`script[src="${url}"]`);
      if (script) script.remove();
      // 可选：清理全局变量，比如 delete window.jQuery; delete window.$;
    });
  }
};
</script>

方案2：使用Webpack动态import（适合npm安装的库） #

如果你的这些库是通过npm安装的（比如npm install jquery），可以直接用ES模块的动态导入语法，Webpack会自动拆分代码，实现按需加载：

<template>
  <!-- 登录组件内容 -->
</template>

<script>
export default {
  name: 'Login',
  async mounted() {
    try {
      // 动态导入jQuery
      const $ = await import('jquery');
      // 动态导入本地脚本（需要确保Webpack能正确解析路径，可在vue.config.js中配置别名）
      await import('@/assets/plugins/pace/pace.min.js');
      await import('@/assets/plugins/modernizr.custom.js');

      // 执行初始化逻辑
      window.Pace?.start();
      // 使用jQuery
      $('body').css('background-color', '#f5f5f5');
    } catch (err) {
      console.error('脚本加载失败:', err);
    }
  }
};
</script>

注意：如果是本地自定义脚本，使用动态import时可能需要配置Webpack的file-loader或raw-loader来处理，具体可以参考Vue CLI的文档配置规则。

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