如何在nuxt(vue)中使用原始html文件

Question

我想创建一个页面使用stripe samples/firebase订阅支付跳转到stripe支付页面。所以我把它的html/css/js文件(在"public"文件夹中(放在我的nuxt应用程序的/static中。然而，由于它只用于静态文件，因此不能使用vuex和插件。幸运的是，html中的标签从url中读取firebase，因此可以使用firebase。

但是我可以把原始的html/css/js文件放在像.vue文件这样的nuxt/pages中吗？(我试过了，但没能。(我知道最好的方法是将html/js文件重写为vue文件，但这对我这个初学者来说太难了(另外，我是日本人，英语不好，对不起(。或者我可以在/static/files中使用npm包和模块吗？我已经在谷歌上搜索了两天，但无法解决。我真的需要帮助，谢谢！！

这是我的代码：static/public/javascript/app.js

import firebase from firebase; 
/*↑ it will be error "Cannot use import statement outside a module".
but in pages/.vue files and plugins/files, it will work... 
I also tried "import firebase from '~/plugins/firebase.js'"*/

const STRIPE_PUBLISHABLE_KEY = ....

static/public/index.html

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-functions.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>

↑它从url中读取firebase，但我想使用我安装的firebase模块。

Answer 1

最终我将js/html代码重写为vue。基本上，它只需将js代码复制到mounted((中即可完成，但由于我无法使用js操作嵌套的模板标记，因此我使用v-if和v-for重写了一个部分。

Answer 2

有几种解决方案。

要加载第三方脚本，可以使用以下解决方案：https://stackoverflow.com/a/67535277/8816585

根据您尝试加载的内容，使用Nuxt插件也可以是一种解决方案：https://nuxtjs.org/docs/2.x/directory-structure/plugins/

最后，这里有一个关于如何在Nuxt中正确处理Stripe的解决方案：https://stackoverflow.com/a/67504819/8816585

但static不是一个放代码的地方。正如所说，这是为公众提供的东西，比如favicons，一些你想分享给访客或类似的免费pdf书。

最近没有在Nuxt中使用firebase，但我希望这些可能仍然有助于弄清楚如何用Nuxt编写它。

Answer 3

您可以在vue组件文件中通过render()加载html

nuxt.config.js

build: {
extend(config, ctx){
config.resolve.alias['vue'] = 'vue/dist/vue.common';
}
}

在你的vue组件文件中

<script>
import myHtml from '~/path/to/your/html/my_html.html';
export default{
render(h){
return h({
template: `<main>${myHtml}</main>`
});
}
}
</script>

并且页面将被呈现为vue<router-view/>或<nuxt/>中的组件，但请确保my_html.html中没有<script>标签，将js代码放在render()中，如下面所示

<script>
import myHtml from '~/path/to/your/html/my_html.html';
export default{
render(h){
return h({
template: `<main>${myHtml}</main>`,
created(){
console.log('I have been created!')
},
mounted(){
console.log('I have been mounted!')
},
methods: {
exampleMethod(){
alert('this is an example')
}
}
});
}
}
</script>