vue CLI 3 public path deploying in webserver

Question

Our vue application has to be deployed in a web server in a relative path...something like student.com/myvueapp/

so in my vue app , i put public path as myvueapp

and in vue.config.js :

 module.exports = {
      publicPath: '/myvueapp/'
    }

It works in the subpath , when i do vue-cli-service serve .But when i do build and use the assets ,it doesn't work. I I went to dist directory after building and ran python -m SimpleHTTPServer 8000 it fails.

How should i fix it ? should i set some other properties other than public path? I put it into our dev server nginx , but there also it doesn't work.

Nginx in DEV environment. I am curious why doesnt it work in local — Janier
– Janier, Commented Jul 25, 2019 at 22:39
npmjs.com/package/static-server I tried this..it doesnt work when publicPath is specified and when i use build — Janier
– Janier, Commented Jul 25, 2019 at 22:48

Phil · Accepted Answer · 2019-07-26 00:17:00Z

0

The build task will only build your app's root directory. The paths within the file will be correct for your configured publicPath though, eg

<!-- in dist/index.html -->
<script src=/myvueapp/js/app.0fcf91de.js></script>

The idea is that you take the contents of your dist folder and deploy it to $DOCUMENT_ROOT/myvueapp/ on your production HTTP server.

For example, if your NGINX config has

root /usr/share/nginx/html;

you would create the directory /usr/share/nginx/html/myvueapp and copy the contents of dist into that.

If you're trying to run it locally, you'll still need to manually create a folder (or symbolic link) for your publicPath.

# in some directory

# create a symlink
ln -s path/to/your/app/dist myvueapp
# or create a real folder, eg
# mkdir myvueapp && cp -a path/to/your/app/dist/* myvueapp/

# start your server
python -m SimpleHTTPServer

then open http://localhost:8000/myvueapp/.

edited Jul 26, 2019 at 0:17

answered Jul 25, 2019 at 23:33

Phil

166k25 gold badges265 silver badges269 bronze badges

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

4 Comments

Janier Over a year ago

What all things should i do in nginx

Phil Over a year ago

@Janier I've added an nginx example

Janier Over a year ago

I tried it..only difference is i have to start the server outside the directory..so if i have mydir/myvueapp ... I have to be in mydir and start the webserver..is that right?

Phil Over a year ago

That's right. Your web server's document root (the local filesystem path corresponding to /) must have relative access to myvueapp

Collectives™ on Stack Overflow

vue CLI 3 public path deploying in webserver

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related