Reputation: 981
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.
Upvotes: 3
Views: 11213
Reputation: 5556
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.
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.
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)
.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! ;)
Upvotes: 8