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?

Intoxicate

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.

Visitation

If it does not work, please indicate the version of Vue you are using to people can help you. At this moment I am not working with Vue and I don't know if something changed in last version. – Visitation

Hi, I've created a vue.config.js with publicPath: './'. However, relative paths not being added in build. Ex: <link href=css/app.a3662c38.css rel=preload as=style><link href=css/chunk-vendors.d95e1e17.css rel=preload as=style> I want the './' to be added before. I'm using @vue/cli 4.3.1. Thanks – Tildi

@J.Raji href=css/app.a3662c38.css is equivalent to href=./css/app.a3662c38.css . – Evanston

Still a 404 though, have you solved it @J.Raji? – Massive

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/'

Laniferous

Answer 3

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 docs.

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

Erlineerlinna

Answer 4

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?

Tsan

Ok, more precision is needed ! I have one server for several apps, each app have a dedicated folder on the server like /builds/app-name. I built all my apps with an absolute path, but we are migrating into another server with another architecture, and I will have to rebuild all the apps... I was wondering if I could build the apps with a relative path as the starting point. This way I would be able to copy paste my app anywhere I wanted. – Intoxicate

This is not the path on the server, it's the path in the browser, starting from the root. http://www.example.com/this/is/absolute/path. The location of the file in the server's file system is not relevant, as long as the it gets served. – Tsan

Answer 5

With vue-cli 4.5.7 I had to edit ./config/index.js and change to relative: assetsPublicPath: './', You can do it for both dev:{} and build:{}. Originally, it was just '/'.

Firestone