Vue + Typescript 网页在 GAS 侧边菜单模板中不可见答案

【问题标题】：Vue + Typescript webpage not being visible in GAS sidemenu TemplateVue + Typescript 网页在 GAS 侧边菜单模板中不可见
【发布时间】：2021-01-22 00:51:23
【问题描述】：

我必须使用 Vue + Typescript 为谷歌方面开发一个应用程序，这是一个扩展谷歌方面功能的额外菜单。这里有一个没有使用 Typescript https://github.com/clomie/vue-deploy-gas-sample 的示例，结果如下所示： https://gyazo.com/ed417ddd1c2e4356f502b32a1ed8a55e

我使用 Vue 和 Typescript 创建了一个简单的网页，并配置了与示例类似的 webpack 以生成内联 css/js 的 html。 https://github.com/jordisantamaria/gas-vue-typescript

问题是当我在谷歌方面尝试时，它是如何显示的： https://gyazo.com/6b630fae515cd3de550de4e40a6db7a9 正在使用<div id="app"/> 生成 Html，但 Vue 没有生成额外的 html。

如果我检查控制台，会出现此错误：

Uncaught SyntaxError: Unexpected token '>'

知道如何配置 webpack 以正确使用 Vue + typescript 和 GAS 吗？这是当前使用 Vue 的 webpack 配置：

// vue.config.js
// eslint-disable-next-line @typescript-eslint/no-var-requires
const HtmlWebpackPlugin = require("html-webpack-plugin");
// eslint-disable-next-line @typescript-eslint/no-var-requires
const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
// eslint-disable-next-line @typescript-eslint/no-var-requires
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
// eslint-disable-next-line @typescript-eslint/no-var-requires
const CopyPlugin = require('copy-webpack-plugin')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path')

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.html$/,
          loader: "html-loader"
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        inlineSource: ".(js|css)$",
        template: "public/index.html",
        inject: true,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: false
        },
        chunksSortMode: 'auto'
      }),
      new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
      new OptimizeCSSPlugin({
        cssProcessorOptions: { safe: true, map: { inline: true } }
      }),
      new CopyPlugin({
        patterns: [
          { from: 'gas'},
        ],
      })
    ]
  }
};

我使用当前的 Vue + Typescript 检查了另一个 github 示例，它用作 GAS 应用程序，但将其用作侧边栏菜单会产生与我的源代码相同的错误，另一个示例在这里：https://github.com/clomie/gas-vue-typescript

【问题讨论】：

标签： typescript vue.js google-apps-script webpack google-slides

【解决方案1】：

最后我找到了解决方法，似乎问题是 vue cli 自动生成的 webpack 不适用于 GAS，我知道为什么。

所以我配置了自己的 webpack。你可以在https://github.com/jordisantamaria/gas-vue-typescript看到结果

基本上我为 webpack 配置了 vue、typescript 等的加载器。像这样 https://github.com/jordisantamaria/gas-vue-typescript/blob/master/webpack.config.js

并使用 webpack 而不是 cli 运行项目：

"scripts": {
    "serve": "webpack-dev-server --config ./webpack.dev.config.js",
    "build": "webpack --config ./webpack.config.js",
    "build:dll": "webpack --config ./webpack.dll.config.js",
  },

【讨论】：