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've added a base href:
<base href="/dist/">
And the scripts load, but all the asset paths created by Webpack are broken, the images and fonts don't load as they are pointing to the root directory.
Can anyone please help?
For Vue CLI 3 it is pretty simple.
Edit your vue.config.js (if there is none, create it in project root directory) and add following lines:
module.exports = {
baseUrl: "./"
};
Or whatever sub-directory you want.
You may also decide according to NODE_ENV. See the docs.
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'
}
UPDATE
As mentioned in comments below, for Vue CLI 3.3+ use publicPath property instead of baseUrl.
Assuming you are using the webpack template from vue-cli, you need to edit the assetsPublicPath property in config/index.js - notice there is one for build and for dev
Check out Handling Static Assets section in the docs for more info.
Newer link for CLI v3+ users: https://cli.vuejs.org/guide/html-and-static-assets.html
Notice the property is just called publicPath
assetsPublicPath to . (dot) and no <base href=''> to make it executable from any path
If you installed your app with
npm install -g @vue/cli
vue ui
then you should create file vue.config.js in the top project folder (where package.json is)
and paste like above.
For Vue 3 projects scaffolded with Vite, edit the vite.config.js file, adding/changing the base property as following:
export default defineConfig({
/* ... */
base: './',
/* ... */
})
