Question

我曾经试图将使用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>

我想念什么？

谢谢！

Answer 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>

还要检查控制台错误。

Answer 2

是空白页吗？您在控制台中收到任何错误吗？

我认为是因为它不知道根索引文件在哪里。

尝试：
-转到“ htdocs文件夹”并创建一个空文件夹（示例文件夹名称：abc）。
-转到项目中的“配置文件夹”。
-在“配置文件夹”内部，有一个名为index.js的js文件
-在index.js内部更改构建时的“ assetsPublicPath”路径，默认情况下仅包含“ /”。将其更改为'/ abc /'并运行npm build之后，将从该build生成的所有文件放入该文件夹，它应该知道在哪里找到根索引文件。
-转到http://localhost/abc/

在Localhost上运行VueJS应用

2 个答案: