Vue + Typescript网页在GAS sidemenu模板中不可见
我必须使用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
问题是，当我在google sides中尝试它时，它是如何显示的: Vue html是用<div id="app"/>生成的，但https://gyazo.com/6b630fae515cd3de550de4e40a6db7a9没有生成额外的Html。
如果我选中console，则会出现以下错误：
Uncaught SyntaxError: Unexpected token '>'你知道如何配置webpack来正确使用Vue + typescript和GAS吗？以下是当前webpack对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'},
],
})
]
}
};我使用Vue + Typescript检查了另一个github示例，该示例可以作为GAS应用程序使用，但将其用作侧边栏菜单时会出现与我的源代码相同的错误，另一个示例如下：https://github.com/clomie/gas-vue-typescript
回答 1
Stack Overflow用户
发布于 2020-10-09 11:10:57
最后我找到了一个解决的方法，问题似乎是webpack自动生成的vue线索不是和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",
},https://stackoverflow.com/questions/64237701
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号