在Google Apps Script项目中导入Vuetify 3的useTheme()函数实现动态主题切换的问题

嘿，我帮你捋清楚这个问题哈！在Google Apps Script（GAS）项目里用Vuetify的useTheme()确实不能像常规Vue项目那样直接用import，因为GAS的前端环境没有模块化的加载机制，得换个方式来搞定~

核心原因 #

GAS的前端是基于纯HTML+CDN的环境，没法用Vue CLI那种模块化的import语法。不过别担心，Vuetify通过CDN加载时，会把useTheme这类核心方法挂载到全局的Vuetify对象上，我们直接从全局取就行。

具体实现步骤 #

1. 调整你的Index.html结构

确保正确引入Vue 3和Vuetify 3的CDN资源，然后通过全局对象获取useTheme，再实现主题切换逻辑：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入Vuetify样式 -->
  <link href="https://cdn.jsdelivr.net/npm/vuetify@3.4.0/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    <v-app>
      <v-btn @click="toggleTheme">切换主题</v-btn>
      <!-- 这里可以添加其他Vuetify组件 -->
    </v-app>
  </div>

  <!-- 引入Vue 3和Vuetify 3的JS资源 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3.3.0/dist/vue.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@3.4.0/dist/vuetify.min.js"></script>

  <script>
    // 从全局Vue对象解构createApp
    const { createApp } = Vue;
    // 从全局Vuetify对象解构createVuetify和useTheme
    const { createVuetify, useTheme } = Vuetify;

    // 初始化Vuetify，配置主题（可选，也可以用默认主题）
    const vuetify = createVuetify({
      theme: {
        defaultTheme: 'light',
        themes: {
          light: {
            colors: {
              primary: '#1976D2',
            },
          },
          dark: {
            colors: {
              primary: '#2196F3',
            },
          },
        },
      },
    });

    // 创建Vue应用
    createApp({
      setup() {
        // 直接使用全局的useTheme获取主题实例
        const theme = useTheme();

        // 实现主题切换函数
        const toggleTheme = () => {
          theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
        };

        // 暴露函数给模板使用
        return { toggleTheme };
      },
    })
    .use(vuetify) // 挂载Vuetify
    .mount('#app'); // 挂载到页面节点
  </script>
</body>
</html>

2. 确保Code.gs正确返回页面

你的Code.gs里的doGet函数需要正确加载Index.html：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('动态主题切换示例')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

注意事项 #

• 要保证Vue和Vuetify的版本兼容，建议使用同一大版本的CDN链接（比如Vuetify 3.x对应Vue 3.x）
• 如果不需要自定义主题颜色，可以去掉createVuetify里的theme配置，直接用Vuetify的默认主题

这样就能在GAS项目里正常使用useTheme()实现动态主题切换啦！

备注：内容来源于stack exchange，提问作者ALEXANDRA