Vue2无Node.js环境下通过CDN引入Vuetify类库的方法求助

你当前的JS文件处于非ES模块模式，直接用import会触发“无法在模块外部导入”的错误，因此需要用CDN全局引入的方式来集成Vuetify，具体步骤如下：

1. 在HTML中引入CDN资源 #

在页面的<head>标签内按顺序引入所需资源（先样式库，再核心JS库）：

<head>
  <!-- Vuetify 样式文件 -->
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <!-- Vuetify依赖的字体与图标库 -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <!-- Vue2 核心库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <!-- Vuetify 核心库 -->
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</head>

2. 修改Vue实例代码 #

CDN引入后，Vue和Vuetify会成为全局对象，无需import，直接在JS中初始化并注入到Vue实例即可：

// 初始化Vuetify实例
const vuetify = new Vuetify()

const app = new Vue({
    el: '#app',
    vuetify // 将Vuetify注入Vue实例
})

可以在页面中添加Vuetify组件测试效果，比如：

<div id="app">
  <v-btn color="primary">测试Vuetify按钮</v-btn>
</div>

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