在本地主机上运行 VueJS 应用程序
Posted
技术标签:
【中文标题】在本地主机上运行 VueJS 应用程序【英文标题】：Run VueJS app on Localhost 【发布时间】：2019-01-12 14:12:24 【问题描述】：我一直在尝试在我的本地主机中运行一个使用 Vue CLI/Webpack 构建的简单 VueJS 应用程序，而无需使用 npm run dev，而只能从我的本地服务器访问。我运行 npm run build 并将文件拖到 Mamp 上的 htdocs 中，但它似乎仍然不起作用。这是我在项目中的目录结构：
这是我根文件夹中的 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
这是 dist 文件夹中的 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>demo</title>
<link href=/static/css/app.e1c36c05dd8e70649268723708cfb519.css rel=stylesheet>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js>
</script><script type=text/javascript src=/static/js/vendor.3fae27b6d0a0572472a3.js></script>
<script type=text/javascript src=/static/js/app.e5eb3a5fa6134479362c.js></script>
</body>
</html>
我错过了什么？
谢谢！
【问题讨论】：
您是否转移了build 文件夹？如果是这样，那是错误的文件夹。您构建的文件位于dist
另外，你用的是路由器吗？
是的，我正在使用路由器@SølveTornøe
我转移了里面的所有东西。我需要获取文件夹或转移到 dist 吗？@SølveTornøe
一旦你构建了你的项目，你唯一需要传输到你的 http-server 的就是 dist 文件夹的内容。在您的情况下，文件夹 static/ 和 index.html
【参考方案1】：
1 - npm run build
2 - 使用index.html复制构建dist文件夹或dist
3 - 在 htdocs 中创建一个新文件夹 test
4 - 转到localhost/test
如果事情不起作用，请在文本编辑器中查看源代码并更改 src 文件的路径，并可能添加基本 href。你的代码显示/static/
我会替换
<script type=text/javascript src=/static/js/app.e5eb3a5fa6134479362c.js></script>
这个到
<script type=text/javascript src="http://localhost/test/static/js/app.e5eb3a5fa6134479362c.js"></script>
同时检查控制台错误。
【讨论】：
您不必寻找/static/，只需使用引用的任何文件的完整网址，甚至是图标【参考方案2】：
它像一个空白页吗？您在控制台中收到任何错误吗？
我认为是因为它不知道根索引文件在哪里。
试试： - 转到“htdocs 文件夹”并创建一个空文件夹（示例文件夹名称：abc）。 - 转到项目中的“配置文件夹”。 - 在“配置文件夹”中有一个名为 index.js 的 js 文件 - 在 index.js 中更改构建下的“assetsPublicPath”路径，默认只有“/”。将其更改为 '/abc/' 并运行 npm build ，然后将 build 生成的所有文件放入该文件夹中，它应该知道在哪里可以找到根索引文件。 - 转至http://localhost/abc/
【讨论】：
我应该如何在外部文件夹中运行？ index.js 到 htdocs 中的外部文件夹？？？ 不仅更改 index.js 中的路径（项目中的 index.js 位于 config 文件夹中），然后运行“npm run build”，它会在其中生成新文件“dist”文件夹，将 dist 文件夹中的每个文件移动到您在“htdocs”文件夹中创建的空文件夹中。 记住只在 build 下更改“assetsPublicPath”路径，而不是在 dev 下。 我知道，我刚刚做到了。它不起作用。它一定是别的东西。谢谢以上是关于在本地主机上运行 VueJS 应用程序的主要内容，如果未能解决你的问题，请参考以下文章
Spring Boot 应用程序在本地主机上运行，但在外部 Tomcat 上返回 404
Node.js 应用程序在本地主机上运行良好，但在 Heroku 上部署时显示错误
在本地主机上运行的 Vue 应用程序中使用带有 php 文件的 JavaScript fetch() - 相对 URL 问题