6

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:

enter image description here

enter image description here

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!

Improve this question
10
  • Did you transfer the build folder? If so, that's the wrong folder. Your built files is under dist Commented Aug 5, 2018 at 11:08
  • Also, are you using router? Commented Aug 5, 2018 at 11:10
  • Yes i am using router @SølveTornøe 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 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/ and index.html Commented Aug 5, 2018 at 11:22

2 Answers 2

Reset to default
8

1 - 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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

you dont have to look for /static/ just use the full url for any file that is referenced, even the icon
0

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/

Improve this answer

4 Comments

How am i supose to run in an external folder? index.js to an external folder in the htdocs???
no only change the path in the index.js(index.js in your project which is in the config folder), after that run "npm run build" and it will generate new files inside of the "dist" folder, move every files in the dist folder to the empty folder that you created inside of the "htdocs" folder.
And remember only change the "assetsPublicPath" path under build, not under dev.
I know, i just did it. It doesnt work. It must be something else. Thanks

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.