在Localhost上运行VueJS应用程序

Question

I've bee trying to run a simple VueJS application built with Vue CLI/Webpack into my localhost without having to use npm run dev, but only by accessing from my local server. 我试图将使用Vue CLI / Webpack构建的简单VueJS应用程序运行到我的localhost而不必使用npm run dev，但只能通过从本地服务器访问。 I ran the npm run build and dragged the files into my htdocs on Mamp, but still it doesnt seem to work. 我运行了npm run build并将文件拖到Mamp上的htdocs中，但它似乎仍无法正常工作。 This is my directory structure in the project: 这是我项目中的目录结构：

This is my index.html in my root folder 这是我的根文件夹中的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>

and this is the index.html in the dist folder 这是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>

What am i missing? 我错过了什么？

Thank you! 谢谢！

Answer 1

1 - npm run build 1 - npm run build

2 - copy the build dist folder or dist with index.html 2 - 使用index.html复制build dist文件夹或dist

3 - make a new folder in htdocs test 3 - 在htdocs test创建一个新文件夹

4 - go to localhost/test 4 - 转到localhost/test

If things don't work view source in a text editor and change paths of your src files and maybe add a base href. 如果在文本编辑器中查看源代码不起作用，并更改src文件的路径，并可能添加基本href。 Your code shows /static/ 你的代码显示/static/

I would replace 我会替换

<script type=text/javascript src=/static/js/app.e5eb3a5fa6134479362c.js></script>

This to 这个

<script type=text/javascript src="http://localhost/test/static/js/app.e5eb3a5fa6134479362c.js"></script>

Also check console errors. 还要检查控制台错误。

Answer 2

Is it like a blank page? 它像一张空白页吗？ did you get any error in the console? 你在控制台中得到任何错误吗？

I think it's because it doesn't know where the root index file is. 我认为这是因为它不知道根索引文件的位置。

Try: 尝试：
- Go to the "htdocs folder" and create an empty folder(example folder name: abc). - 转到“htdocs文件夹”并创建一个空文件夹（示例文件夹名称：abc）。
- Go to "config folder" in your project. - 转到项目中的“配置文件夹”。
- Inside of the "config folder" there is a js file called index.js - 在“config文件夹”里面有一个名为index.js的js文件
- inside of index.js change the "assetsPublicPath" path under build, default only has '/'. - 在index.js内部更改build下的“assetsPublicPath”路径，默认只有'/'。 Change it to '/abc/' and run npm build after that put all the file that are generate from build inside of that folder, it should know where to find the root index file. 将它更改为'/ abc /'并运行npm build之后，将build中生成的所有文件放在该文件夹中，它应该知道在哪里找到根索引文件。
- Go to http://localhost/abc/ - 转到http：// localhost / abc /

在Localhost上运行VueJS应用程序

问题描述

2 个解决方案

解决方案1
3 已采纳 2018-08-05 12:39:13

解决方案2
1 2018-08-05 11:30:03

在Localhost上运行VueJS应用程序

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-08-05 12:39:13

解决方案2 1 2018-08-05 11:30:03

解决方案1
3 已采纳 2018-08-05 12:39:13

解决方案2
1 2018-08-05 11:30:03