Deploy VueJS App in a sub-directory or sub-path

Question

I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.

If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.

I want deploy VueJS App to this url : https://event.domain.net/webinar

I have added publicPath in vue.config.js :

var path = require(‘path’)
module.exports = {
   publicPath: ‘./’
}

But only the css and js folders point to the path /webinar.

For assets, fonts and others still point to the subdomain https://event.domain.net.

Sagar Rabadiya · Accepted Answer · 2020-06-03 06:27:19Z

2

use value of publicPath as /webinar that should work.

you can configure publicPath even based on environment.

answered Jun 3, 2020 at 6:27

Sagar Rabadiya

4,3211 gold badge24 silver badges28 bronze badges

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

1 Comment

@Argan did this answer solve your problem?

BWappsAndmore · Accepted Answer · 2021-12-30 13:00:45Z

Sagar Rabadiya pointed you to the right link:

create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}

and save the file.

Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.