在本地主机上运行 VueJS 应用程序答案

【问题标题】：Run VueJS app on Localhost在本地主机上运行 VueJS 应用程序
【发布时间】：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

标签： javascript npm webpack vue.js localhost

【解决方案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 下。
我知道，我刚刚做到了。它不起作用。它一定是别的东西。谢谢