typescript - Vue + Typescript 网页在 GAS sidemenu 模板中不可见

Question

我必须使用 Vue + Typescript 为 google sides 开发一个应用程序，这是一个扩展 google sides 功能的额外菜单。这里有一个不使用 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'},
        ],
      })
    ]
  }
};

我检查了另一个 github 示例，目前使用 Vue + Typescript 并作为 GAS 应用程序工作，但将其用作侧边栏菜单会出现与我的源代码相同的错误，另一个示例在此处:https://github.com/clomie/gas-vue-typescript

Answer 1

最后我找到了解决它的方法，问题似乎是 vue cli 自动生成的 webpack 不能与 GAS 一起工作，我知道为什么。

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

基本上我为 vue、typescript 等配置了 webpack 加载器。像这样 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",
  },