CODEWITHSUNDEEP
webpackvue.jsvue-routervuejs2
Existe Deja
Existe Deja

Reputation: 1379

Vuejs, Difficulties to build with relative path

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?

Upvotes: 25

Views: 41613

Answers (5)

multivitamin1000
multivitamin1000

Reputation: 81

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
    ...
})

Upvotes: 8

Miro
Miro

Reputation: 8650

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

Upvotes: 1

ADM-IT
ADM-IT

Reputation: 4182

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

Upvotes: 8

J.S.R - Silicornio
J.S.R - Silicornio

Reputation: 1151

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.

Upvotes: 49

motanelu
motanelu

Reputation: 4025

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?

Upvotes: 5

Related Questions