How to set vue 3 with router from subfolder

Question

I installed fresh vue 3 app with cli, containing also vue router.

On my web I have put builded files into www/dist sub folder. Then in my php index file I linked all js/css files to /dist folder manually.

I have an image in component

<img class="discord-icon" src="@/assets/discord.png">

When I set publicHtml = '/dist' , everything works even image is shown, but for some reason my homepage gets redirected from original "www.page.com" to "www.page.com/dist"

I would like to have default "www.page.com" at homepage but also with working image, how can I achieve that ?

Edit : My router config (default from Manual cli install with router)

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  }
]


const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

UPDATE : On vue discord I got adviced to create .htaccess for this, sadly I am not skilled enough to create one, or even know to which folder store it. Also I had another one already in there since I am using php framework (Nette)

This is how I got it working for now :

"publicPath: '/dist'" and "history: createWebHistory(process.env.BASE_URL)" where project is in "/dist" folder, so page goes www.page.com/dist. All work but. I go to "www.page.com" it redirects to "/dist" but when look in html it does not generate "/dist/css/chunk-vendors.css" so all imported css is missing. But when I hit refresh (going directly to www.page.com/dist) chunk-vendors.css is loaded. By default vendors.css is not in generated index.html so I guess its done by js. So i got evil thought of just paste that vendors.css link manually to my production index.html aand it works, althought when going to /dist url directly I end up with loading this style 2 times lol. Then I got even more evil thought and changed to 'history: createWebHistory("/")' , rebuilded for production and now i have nice www.page.com and even all imported styles are working (with that style link pasted in manually), just have some feeling I will burn in hell.

Answer 1

Here is a little summary of how a vue-cli project usually gets built and pushed to a server. and what kind of config is important and what 's their purpose. hope it gives you an idea of how to setup your project.

Building with Vue Cli

This is how it works in a regular project to build with vue-cli:

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/final-sub-folder' : '',
  // ...
}

The above config sets a different site URL for dev and prod. The prod /final-sub-folder means that on the final URL in your distant server this sub-folder will be present (E.g. https://example.com/final-sub-folder).

when building with Vue Cli npm run build the output goes into /dist folder (by default) and the build is set for prod by default (so process.env.NODE_ENV = 'production').

Now, if you try to go in that dist folder in your localhost (on Apache for instance), the vue-router using the same publicPath will fail because on your localhost your-proj/dist is a different base URL than /final-sub-folder as set in the config. So it will only work in the final server where the base url can be matched.

Setting up vue-router

Your vue-router should always be set to (this config is for vue-router@next - for Vue 3):

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

So that it follows the base URL you set in a single place, in your vue config.

(notes: the createWebHistory removes the # in the URLs)

Adding a .htaccess

Regarding the .htaccess, it is a common practice to set up redirections in it so that on your final server, accessing https://example.com/final-sub-folder/a-sub-page directly will be redirected to your index.html that can load the vue-router which will handle the route matching of what you entered in the URL. https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Without this .htaccess, the Vue router cannot be reached from a sub-folder since it does not exist on the server (it's a virtual route using rewriting engine), it would result in a not found URL.

Here is a simple example of .htaccess:

Options +FollowSymlinks
Options -Indexes

RewriteEngine On
RewriteRule \.(js|css|map|jpe?g|svg|gif|png|eot|ttf|woff2?)(\?.*)?$ - [NC,QSA,L]
RewriteRule .* index.html [NC,QSA,L]

What is important in that is the last line redirecting anything to index.html (which is generated from your vue-cli build). The previous line allows any asset file to not be redirected (no asset file should be handled by vue-router).

Hope it helps you understand! ;)