在AWS上安装Node + vue-cli。但得到一个空白页?

时间:2017-07-01 20:34:37

标签: node.js amazon-web-services vue.js

好的,在这里学习。在AWS上安装了默认的vue-cli应用程序。我做了一个npm run build。当我启动默认的index.html时,我提供了一个空白页面。如果我进入dist,还有另一个index.html,它提供了js文件的链接,但仍然是一个空白页面。

我猜猜webpack要我启动index.html,但是不知道如何使用浏览器来实现这一目标。没有任何错误。但也没有Hello World。谢谢你的帮助。

我在浏览器中看到的内容:

<!DOCTYPE html><html><head><meta charset=utf-8><title>hello-world</title><link href=/static/css/app.87e65e7c83fb67c04e58d4461a7fd8e8.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.fa7eecfb52900d1cfb0a.js></script><script type=text/javascript src=/static/js/vendor.9baeef453ba99a70f46a.js></script><script type=text/javascript src=/static/js/app.cdfbb21001bbc43de4bc.js></script></body></html>

2 个答案:

答案 0 :(得分:2)

当您npm run build Webpack应该生成index.html文件以及包含所有javascript和css的static/目录时。 static/的链接是绝对链接(即http://example.org/static)。当您尝试将index.html作为文件打开时,浏览器将在文件系统的根目录中查找/static/文件夹,当然它无法找到。

要在本地运行它,您需要在本地启动http服务器。一个选项是cd进入具有终端应用程序的目录并运行python -m http.server。然后转到http://localhost:8000/。这应该有效,因为目录树的根目录将是您提供服务的文件夹。

让它在AWS S3上运行将确保您在正确的位置获取静态目录并获取指向它的链接。如果不知道如何在你的桶中组织网站的细节,很难确切地说明。

如果需要,您可以更改静态文件夹在webpack配置中的保存方式:https://vuejs-templates.github.io/webpack/static.html

答案 1 :(得分:0)

您将在项目目录中找到一个名为 / dist 的文件夹。只需将 index.html 文件指向 / dist 目录中,然后我想休息会很好。我刚刚做到了,而且效果很好。 希望它能工作。 谢谢。