Vue项目使用SFC单文件组件时是否无法通过CDN加载依赖库？

CDN脚本插入位置 #

vue-cli 搭建的项目默认存在入口HTML文件，存放在项目根目录的public/index.html路径下。你可以将给出的两段CDN脚本代码插入到该文件的</body>闭合标签之前即可，这种插入方式不会阻塞页面初始渲染。
如果要更优的加载优先级，也可以根据需求插入到<head>标签中，同时添加defer属性保证执行顺序。

SFC单文件组件项目是否支持CDN加载依赖 #

答案是完全支持，不存在无法使用的限制。
你需要先区分SFC的编译环节和运行环节：.vue后缀的单文件组件仅需要在项目构建阶段，通过vue-loader编译为普通的JS代码，和运行阶段加载依赖的方式没有冲突。
如果要完整使用CDN依赖避免打包到本地产物，你只需要额外在项目根目录的vue.config.js（如果没有该文件可自行创建）中添加externals配置，告知webpack不需要将对应依赖打包进产物，直接使用CDN引入的全局变量即可，参考配置如下：

module.exports = {
  configureWebpack: {
    externals: {
      'chart.js': 'Chart',
      'vue-chartjs': 'VueChartJs'
    }
  }
}

配置完成后，你项目中原有的import语句不需要修改，运行时会自动调用CDN加载的全局实例。

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