好的,在这里学习。在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>
答案 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 目录中,然后我想休息会很好。我刚刚做到了,而且效果很好。 希望它能工作。 谢谢。