web-dev-qa-db-fra.com

Vuejs, Difficultés à construire avec chemin relatif

Je rencontre des difficultés pour créer une version appropriée avec un chemin relatif lorsque j'exécute npm run build. La résolution des actifs est facile mais je ne sais pas comment configurer 2 choses:

1/Le assetsPublicPath dans 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/L'option base dans vue-router config semble n'accepter que le chemin absolu aussi ...

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

Donc, cela fonctionne quand j'ai spécifié l'URL future correcte, mais ce n'est pas "à l'épreuve du temps" au cas où le serveur serait modifié ...

Des idées pour résoudre ce problème s'il est résoluble?

webpackvue.jsvue-routervuejs2
10
George Abitbol

Le chemin absolu ne doit pas nécessairement inclure le nom de domaine, il suffit de démarrer à partir de la racine.

Pensez aux URL HTML5. Par exemple, si votre dossier statique se trouve à http://www.example.com/static et l'URL actuelle est http://www.example.com/users alors le chemin relatif serait ../static. Cependant, si vous essayez de voir les détails d'un utilisateur et accédez à http://www.example.com/users/john-doe, le chemin relatif serait ../../static. Vous ne pouvez pas charger les actifs si vous ne savez pas où ils se trouvent, c'est pourquoi vous avez besoin d'un point de départ, d'une URL absolue.

Quel est le problème dont vous avez peur? Peux-tu être plus précis?

3
motanelu

Je sais que tout a changé depuis que vous avez écrit le post. Mais en ce moment avec la dernière version de Vue et Vue Cli vous pouvez l'obtenir avec le fichier de configuration vue ( Je ne suis pas un expert de cette plateforme):

  1. Créez un fichier "vue.config.js" sur le chemin principal de votre projet

  2. Donnez un chemin relatif. Exemple:

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

Il ne fonctionne pas avec les polices ajoutées en CSS, je ne sais pas pourquoi et je fais toujours des recherches sur Google. Si quelqu'un peut lire, ce sera formidable.

23
J.S.R - Silicornio

J'ai résolu mon problème avec les éléments suivants vue.config.js paramètres:

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

Je pense que vous pouvez faire de même avec webpack.config.js également en modifiant output.publicPath. Référence: https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules

Vous pouvez également faire publicPath: process.env.BASE_URL + '/static/'

0
ADM-IT