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:
This is my index.html in my root folder
<!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
<!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!
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:
This is my index.html in my root folder
<!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
<!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!
Share Improve this question asked Aug 5, 2018 at 11:03 Luiz WynneLuiz Wynne 5003 gold badges11 silver badges28 bronze badges 10-
Did you transfer the
buildfolder? If so, that's the wrong folder. Your built files is underdist– Sølve Commented Aug 5, 2018 at 11:08 - Also, are you using router? – Sølve Commented Aug 5, 2018 at 11:10
- Yes i am using router @SølveTornøe – Luiz Wynne Commented Aug 5, 2018 at 11:16
- I transfered everything that is in there. Do i need to get ride of the folder or transfer into the dist?@SølveTornøe – Luiz Wynne Commented Aug 5, 2018 at 11:17
-
Once you build your project, the only thing you need to transfer over to your http-server is the content of the dist folder. In your case, the folder
static/andindex.html– Sølve Commented Aug 5, 2018 at 11:22
2 Answers
Reset to default 81 - npm run build
2 - copy the build dist folder or dist with index.html
3 - make a new folder in htdocs test
4 - go to 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/
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.
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/