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

Posted 2023-03-25

【中文标题】如何在 nuxt(vue) 中使用原始 html 文件？

【英文标题】：how to use raw html file in nuxt(vue)?

【发布时间】：2021-09-03 21:25:32

【问题描述】：

我想创建一个页面跳转到条纹支付页面使用stripe-samples/firebase-subscription-payments。 所以我将它的 html/css/js 文件（在“public”文件夹中）放到了我的 nuxt 应用程序的 /static 中。 但是，由于它仅用于静态文件，因此无法使用 vuex 和插件。好在html中的标签是从url中读取firebase的，所以可以使用firebase。

但是我可以将原始的 html/css/js 文件像 .vue 文件一样放到 nuxt/pages 中吗？（我试过了，但不能..） 我知道最好的办法是把html/js文件改写成vue文件，但是对我这个初学者来说太难了（另外，我是日本人，英语不好，抱歉）。 或者我可以在 /static/files 中使用 npm 包和模块吗？ google了两天还是解决不了，急需帮助，谢谢！！

这是我的代码： 静态/公共/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 = ....

静态/公共/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 模块。

【问题讨论】：

你需要将它移植到nuxt，它只是一个流程示例，可以指导你在vanilla js中需要做什么，如果你想在vue/nuxt中使用相同的应用程序，你需要通过它并实施。将 .html 中的代码放入 pages/*.vue 文件中，然后创建一个插件来加载 firebase lib，或者使用 nuxt 插件firebase.nuxtjs.org 然后通过 js 文件 app.js 并转换/实现代码进入模型、方法等，如果你想在最后使用 .html 文件，你可以使用 nuxt generate.. 聘请开发人员，就像一个小时的工作

@Lawrence Cherone 我很高兴知道重写为 vue 很常见！同时，我有动力在vue中重写它^ ^感谢您的快速回答！

@kissu 抱歉迟到了评论！我很高兴确信静态仍然不适合代码渲染我是初学者，所以我认为这是最佳实践^^;

没有问题。没有粗鲁的意思。这只是一个常见的错误，我正在揭穿它。 :)

@kissu 我得到了一个很好的答案，值得用英语问~

【参考方案1】：

最终我将 js / html 代码重写为 vue。基本上只要把js代码复制到mounted()中就完成了，但是由于无法用js操作嵌套的模板标签，所以我用v-if和v-for重写了一部分。

【参考方案2】：

对此有多种解决方案。

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

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

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

但static 不是放置您的代码的地方。如前所述，这是用于公共内容的，例如网站图标、一些您想与访问者分享的免费 pdf 书等。

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

【参考方案3】：

你可以通过render()在你的vue-component-file中加载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>