Веб-страница Vue + Typescript не отображается в шаблоне бокового меню GAS

Мне нужно разработать приложение для сторон Google, используя Vue + Typescript. Это дополнительное меню, расширяющее функциональные возможности сторон Google. Вот пример без использования Typescript https://github.com/clomie/vue-deploy-gas-sample , и результат выглядит следующим образом: https://gyazo.com/ed417ddd1c2e4356f502b32a1ed8a55e

Я создал простую веб-страницу с Vue и Typescript и настроил веб-пакет, аналогичный образцу, для создания html со встроенными css/js. https://github.com/jordisantamaria/gas-vue-typescript

Проблема в том, что когда я пробую это на стороне Google, это отображается так: https://gyazo.com/6b630fae515cd3de550de4e40a6db7a9 HTML генерируется с помощью <div id="app"/>, но Vue не генерирует дополнительный HTML.

Если я проверю консоль, появится эта ошибка:

Uncaught SyntaxError: Unexpected token '>'

Любая идея о том, как настроить веб-пакет для правильного использования Vue + typescript с GAS? Вот текущая конфигурация веб-пакета с Vue:

// 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


webpack typescript google-apps-script vue.js google-slides
person Jordi Santamaria Portoles    schedule 07.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Наконец, я нашел способ решить эту проблему, похоже, проблема в том, что веб-пакет, автоматически сгенерированный vue cli, не работает с GAS, не знаю почему.

Поэтому я настроил свой собственный webpack. Вы можете увидеть результат в https://github.com/jordisantamaria/gas-vue-typescript< /а>

По сути, я настроил веб-пакет с загрузчиками для 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",
  },
person Jordi Santamaria Portoles    schedule 09.10.2020