javascript 在本地主机上运行 VueJS 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51693713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Run VueJS app on Localhost
提问by Luiz Wynne
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. I ran the npm run build and dragged the files into my htdocs on Mamp, but still it doesnt seem to work. This is my directory structure in the project:
我一直在尝试将使用 Vue CLI/Webpack 构建的简单 VueJS 应用程序运行到我的本地主机中，而不必使用 npm run dev，而只能通过从我的本地服务器进行访问。我运行 npm run build 并将文件拖到我在 Mamp 上的 htdocs 中，但它似乎仍然不起作用。这是我在项目中的目录结构：
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!
谢谢！
采纳答案by TheBlackBenzKid
1 - npm run build
1 - npm run build
2 - copy the build dist folder or dist with index.html
2 - 复制 build dist 文件夹或 dist index.html
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. Your code shows /static/
如果事情不起作用，请在文本编辑器中查看源代码并更改 src 文件的路径，并可能添加一个基本的 href。您的代码显示/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.
还要检查控制台错误。
回答by Vic24032018tor
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).
- Go to "config folder" in your project.
- Inside of the "config folder" there is a js file called index.js
- inside of index.js change the "assetsPublicPath" path under build, default only has '/'. 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.
- Go to http://localhost/abc/
尝试：
- 转到“htdocs 文件夹”并创建一个空文件夹（示例文件夹名称：abc）。
- 转到项目中的“配置文件夹”。
- 在“config 文件夹”中有一个名为 index.js 的 js 文件
- 在 index.js 中更改 build 下的“assetsPublicPath”路径，默认只有'/'。将其更改为 '/abc/' 并运行 npm build 之后将所有从 build 生成的文件放在该文件夹内，它应该知道在哪里可以找到根索引文件。
- 转到http://localhost/abc/
