在 Firebase 托管上托管 Vue
Posted
技术标签:
【中文标题】在 Firebase 托管上托管 Vue【英文标题】：Host Vue on Firebase Hosting 【发布时间】：2020-06-17 14:39:41 【问题描述】：我正在尝试在 Firebase 上使用此代码托管，但它不起作用。 Item.name 出现而不是值:( 我已经在 Codepen 上测试了相同的代码并且它有效。 Firebase 是否接受 vue.min.js？ 部署时，网站会显示 var 而不是 Google 表格中的表格值。
我正在尝试在 Firebase 上使用此代码托管，但它不起作用。 Item.name 出现而不是值:( 我已经在 Codepen 上测试了相同的代码并且它有效。 Firebase 是否接受 vue.min.js？ 部署时，网站会显示 var 而不是 Google 表格中的表格值。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script>
var app = new Vue(
el: '#app',
mounted()
let vm = this
axios
.get(
'https://sheets.googleapis.com/v4/spreadsheets/sheetsID/values/A2:C20?key=apiKey'
)
.then(function (response)
let specials = response.data.values
for (let index = 0; index < specials.length; index++)
const element = specials[index]
let mitem =
name: element[0],
description: element[1],
price: element[2]
if (vm.isEven(index))
vm.menuItems_L = vm.menuItems_L.concat(mitem)
else
vm.menuItems_R = vm.menuItems_R.concat(mitem)
console.log(response)
)
,
data:
menuItems_L: [],
menuItems_R: [],
menuStyle:
background: '#f2f2f2',
color: '#000'
,
computed: ,
methods:
isEven: function (n)
return n % 2 == 0
);
</script>
<body>：
<div id="app">
<section id="specialssection" class="specials-container" v-if="menuItems_L" :style="menuStyle">
<div id="special_component" :style="menuStyle">
<div class="specials-table-container">
<table>
<tbody v-for="item in menuItems_L" :key="item.name">
<tr class="nameandprice">
<td>
<span :style="menuStyle">item.name</span>
</td>
<td>
<span :style="menuStyle">R$item.price</span>
</td>
</tr>
<tr class="description">
<td colspan="2">item.description</td>
</tr>
</tbody>
</table>
<table>
<tbody v-for="item in menuItems_R" :key="`specialmenu-$item.name`">
<tr class="nameandprice">
<td>
<span :style="menuStyle">item.name</span>
</td>
<td>
<span :style="menuStyle">$item.price</span>
</td>
</tr>
<tr class="description">
<td colspan="2">item.description</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
【问题讨论】：
【参考方案1】：看起来唯一错误的是标签的顺序。
你只需要在<div id="app">标签被加载到DOM之后运行vue代码。这是一个例子：
<html>
<head>
<!-- Include all CDN scripts here -->
</head>
<body>
<div id="app" >
</div>
<script>
// Needs to be called after the <div id="app"> tag is loaded into the DOM
var app = new Vue(
el: '#app',
...
)
</script>
</body>
</html>
【讨论】：
以上是关于在 Firebase 托管上托管 Vue的主要内容，如果未能解决你的问题，请参考以下文章
进入我在 firebase 托管上托管的应用会重定向到谷歌登录页面