html - Vue-Nuxt : Why can't I see the generated HTMLs correctly?

标签 html vuejs2 static nuxt.js

因此,当我键入 npm run generate 时,Nuxt 会将我的项目生成到 dist 文件夹中。在该文件夹中,我可以找到一个名为 _nuxt 的文件夹,其中包含 .js 文件和 index.html 文件,但是当我在浏览器它不显示任何内容。

所以,我的问题是:那些不是静态文件吗?

当你使用 CDN served vue.js 时,你有 html 文件,你点击一下,所有内容都会显示在浏览器上,因为那些 .html 文件是静态的,它们不需要内部本地主机服务器。 为什么 npm run generate 不做同样的事情?或者如何查看生成的文件?

最佳答案

作为@aljazerzen解释说,Vue,js 不会开箱即用地执行 SSRNuxt.js 的目标之一就是为您提供 SSR ,作为一项好处,您还可以生成网站的静态版本。如果我得到你想要的正确,你想要做的是当你打开你的 index.html(Nuxt.js 为你生成的)你可以看到您的功能性网页。当您以 file:/// url 访问您的网站时,您的浏览器(至少我已经看到它发生在 Chrome 上)不会加载您的 .js 文件。

我手头没有任何 Nuxt 生成的网站,所以我不能告诉你为什么会发生这种情况。但这是我的猜测:当 Nuxt 生成这些文件时,它会为它们提供一个无法作为 file:/// 访问的 src,可能是 /your_js.js,当它尝试加载它时,认为它是根文件夹的 / 而不是相对于您网站的根目录 (/)。

此问题的解决方案是使用任何网络服务器为您的 Assets 提供服务。根据Nuxt.js's documentation :

nuxt generate:构建应用程序并将每个路由生成为 HTML 文件(用于静态托管)。

您可以通过键入以下内容进行快速测试并使用简单的 Web 服务器:

python -m http.server

在包含您生成的 Assets 的文件夹中。

希望这对您有所帮助!

关于html - Vue-Nuxt : Why can't I see the generated HTMLs correctly?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59829082/

相关文章:

Java 静态方法重写和接口(interface)

audio - 我需要分析许多音频WAV文件中的特征性噪声,想法吗?

html - Bootstrap 表单样式不适用

html - 怎么过渡出去?

html - 如果图片与侧面对齐,请将文本移至图片下方

javascript - for 循环中的 Vue 插槽范围

.net - 了解 F# 静态成员约束(构造小于通用警告)

javascript - 如何从表单中打开 Thickbox 并为其提供数据?

vue.js - "TypeError: Cannot read property ' 得到 ' of undefined", Axios, Vue.JS

javascript - 如何将firebase数据库查询输出到VueJs页面