Vuejs, Difficulties to build with relative path

Question

I'm facing difficulties to make a proper build with a relative path when I run npm run build. Resolving assets is easy but I don't know how to configure 2 things:

1/ The assetsPublicPath in config/index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/ONLY_ABSOLUTE_PATH_ARE_ALLOWED/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

2/ The base option in the vue-router config seems to accept only absolute path too...

const router = new VueRouter({
  mode: 'history',
  base: '/ABSOLUTE_PATH_ONLY/',
  routes: [
    { path: '/', redirect: '/fr/poster/home' },
    { path: '/:lang', redirect: '/:lang/poster/home' },
    {
      path: '/:lang/poster',
      component: PosterLayout,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          name: 'home',
          path: 'home',
          component: Home
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          name: 'themeCover',
          path: ':theme',
          component: ThemeCover
        }
      ]
    },
    {
      name: 'themeDetails',
      path: '/:lang/theme/:theme',
      component: ThemeDetails
    }
  ]
})

So, it works when I specified the correct future URL, but it's not "future proof" in case, the server is modified...

Any ideas to solve this if it's solvable?

Answer 1

I know everything has changed from you wrote the post. But at this moment with the last version of Vue and Vue Cli you can get it with the vue config file (I am not an expert in this platform):

1. Create a "vue.config.js" file at the main path of your project

2. Give a relative path. Example:

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

It is not working with fonts added in css, I don't know why and I am still googlying. If anyone reading can help will be great.

Answer 2

I have solved my problem with the following vue.config.js settings:

module.exports = {
    publicPath: process.env.BASE_URL,
    assetsDir: process.env.BASE_URL
};

I think you can do the same with webpack.config.js as well by changing output.publicPath. Reference: https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules

You can also do publicPath: process.env.BASE_URL + '/static/'

Answer 3

The absolute path does not have to include the domain name, it just needs to start from the root.

Think about HTML5 URLs. For example, if your static folder is located at http://www.example.com/static and the current url is http://www.example.com/users then the relative path would be ../static. However, if you're trying to see an user's details and go to http://www.example.com/users/john-doe, the relative path would be ../../static. You can't load the assets if you don't know where they are, that's why you need a starting point, an absolute URL.

What's the problem you're afraid of? Can you be more specific?

Answer 4

For the Vue 3 and Vite combination, I had to edit the vite.config.js file (which already existed) and add the folder name as the base parameter.

// https://vitejs.dev/config/
export default defineConfig({
    base: './', // Path relative to project root
    ...
})