Vue CLI创建的Vue2项目引入JS文件报错及失效问题咨询

1. index.html直接引用src路径下JS报Uncaught SyntaxError: Unexpected token '<'的处理 #

• 报错本质是Vue CLI的静态资源映射规则限制：src目录属于项目源码路径，开发服务器不会对外暴露这个路径的访问权限，所有未匹配的请求都会被fallback返回index.html的内容，浏览器把返回的HTML当JS解析时，遇到开头的<标签字符，就会触发这个语法错。
• 正确实现方式：如果要通过index.html的script标签引入本地JS，必须把JS文件移到public目录下，比如新建public/js/文件夹，把typewriter-effect.min.js、custom.js放进去，再在index.html里通过带BASE_URL前缀的绝对路径引用，不要写相对路径：

  <script src="<%= BASE_URL %>js/typewriter-effect.min.js"></script>
  <script src="<%= BASE_URL %>js/custom.js"></script>
  

  这种写法在开发环境会正常映射public目录的静态资源，打包构建时也会自动把public下的文件拷贝到输出根目录，不会出现路径找不到的问题。

2. 用import方式引入src目录下JS不生效的常见原因 #

很多人在main.js、App.vue里写了import语句就以为脚本会正常运行，实际踩中最多的是以下几个坑：

• 执行时机不匹配：在main.js顶层import的脚本，执行时机早于Vue实例的DOM挂载流程，很多依赖DOM元素交互的老脚本（比如slick轮播、自定义交互逻辑的custom.js），这时候还没获取到页面上的目标DOM节点，自然没法完成绑定，看起来就像脚本没生效。
  这类需要操作DOM的脚本，不要在main.js全局顶层导入，改成在对应页面组件的mounted钩子（DOM渲染完成的生命周期节点）里动态导入，确保脚本执行时页面元素已经存在：

  // 例如在使用轮播的Home.vue组件中
  export default {
    mounted() {
      // DOM就绪后再加载依赖DOM的脚本
      import('./assets/js/slick.min.js').then(() => {
        // 手动触发插件初始化
        $('.target-slider').slick()
      })
    }
  }
  

• 全局变量缺失：很多老的第三方JS是依赖window上的全局变量运行的（比如slick依赖全局的$、jQuery对象），ESM模块化环境下，import进来的脚本不会自动把变量挂载到window上，如果你的custom.js里依赖这些全局变量，就会因为变量未定义报错，看起来像脚本没加载。
  这类场景的解决方式是，引入依赖全局变量的脚本前，先手动把依赖挂到window上：

  // main.js中处理全局依赖
  import $ from 'jquery'
  window.$ = $
  window.jQuery = $
  // 后续再引入依赖$的第三方脚本
  import './assets/js/slick.min.js'
  

• 脚本内置初始化逻辑的时机问题：很多网上下载的custom.js，初始化逻辑是直接写在脚本顶层的，脚本一加载就立刻执行DOM查找和绑定，在模块化环境下直接import，会因为此时Vue还没渲染对应组件，找不到目标元素而失效。这种情况要么把脚本里的初始化逻辑改成可以手动调用的函数，等组件DOM渲染完成后再触发调用，要么按前面动态导入的方式，等DOM就绪后再加载脚本。

3. CDN引入脚本显示加载成功但功能不生效的排查方向 #

• 优先检查脚本的放置位置：如果把script标签写在index.html的head里，脚本会早于页面DOM结构加载执行，找不到要绑定的元素自然失效，把这类依赖DOM的脚本移到body标签的最末尾，等DOM加载完成后再执行即可。
• 排查依赖冲突：如果CDN引入了jQuery类的全局依赖，同时项目里又通过npm安装了同类型依赖，两个版本的全局变量会互相覆盖，导致依赖全局对象的插件初始化失败，这种情况只保留单一来源的依赖即可（要么全用CDN的，要么全用npm安装的）。

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