在GAS侧边菜单模板中看不到Vue + Typescript网页

问题描述

我必须使用Vue + Typescript开发适用于google的应用程序，这是一个扩展菜单，可扩展google的功能。这里有一个不使用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

问题是当我在Google方面尝试时，它的显示方式是： https://gyazo.com/6b630fae515cd3de550de4e40a6db7a9 HTML是使用<div id="app"/>生成的，但是Vue不会生成多余的html。

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

Uncaught SyntaxError: Unexpected token '>'

关于如何配置Webpack以便在GAS上正确使用Vue +打字稿的任何想法？ 这是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

解决方法

最后我找到了一种解决方法，看来问题是vue cli自动生成的webpack无法与GAS一起使用，Idk为什么。

所以我配置了自己的Webpack。 您可以在https://github.com/jordisantamaria/gas-vue-typescript

中查看结果

基本上，我为webpack配置了vue，打字稿等加载程序。 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",},