Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    novembre 2016
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : novembre 2016
    Messages : 9
    Points : 5
    Points
    5

    Par défaut Configuration vue.js avec webpack

    Bonjour,

    je me suis mis à vue et j’ai installé plusieurs librairies comme vue-router. J’ai voulu faire quelques tests mais j’ai un problème quand je veux rejoindre une route qui contient plusieurs éléments.
    Exemple: /ma/route

    Alors j’utilise plusieurs librairies comme par exemple:

    • webpack-dev-server
    • html-webpack-plugin
    • mini-css-extract-plugin


    Vue-router est configurer pour fonctionné avec le mode historique. J’ai pu voir à différent endroit qu’il fallait mettre le paramètre historyApiFallback: true mais le problème est toujours là.

    J’ai l’impression que le problème vient de html-webpack-plugin mais je n’en suis pas sur.

    Alors pour les versions des différents éléments je suis sur les dernières.
    La structure de mon projet est la suivante:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    Project Vue:
         - assets
              - images
              - styles
                   app.css
         - build
              - webpack.config.js
         - dist
         - node_modules
         - src
              - components
              - app.js
              - App.vue
         - index.html
         -package.json
    pour les fichiers les voicis:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    //webpack.config.js
     
    'use strict'
     
    const webpack = require('webpack');
    const { VueLoaderPlugin } = require('vue-loader');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    const path = require('path');
    const MiniCssExtractPlugin  = require('mini-css-extract-plugin');
     
    function resolve(dir) {
        return path.join(__dirname, '..', dir);
    }
     
    module.exports = {
        mode: 'development',
        entry: [
            './src/app.js'
        ],
        devServer: {
            hot: true,
            watchOptions: {
                poll: true
            },
            historyApiFallback: true
        },
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                },
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /\.js$/,
                    use: 'babel-loader'
                }
            ]
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new VueLoaderPlugin(),
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: 'index.html',
                inject: true
            }),
            new CopyWebpackPlugin([{
                from: resolve('assets/images'),
                to: resolve('dist/images'),
                toType: 'dir'
            }]),
            new MiniCssExtractPlugin({
                filename: 'main.css'
            })
        ]
    };
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    //app.js
     
    import Vue from 'vue'
    import '../assets/styles/app.css'
    import App from './App.vue'
    import VueRouter from 'vue-router'
    import Hello from './components/Hello.vue'
    import PageA from './components/PageA.vue'
     
    Vue.use(VueRouter);
     
    const router = new VueRouter({
        mode: 'history',
        routes: [
            { path: '/', component: Hello },
            { path: '/article/id', component: PageA },
            { path: '*', redirect: '/'}
        ]
    });
     
    new Vue({
        el: '#app',
        router,
        render: h => h(App)
    });
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //index.html
     
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>My Vue app with webpack 4</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    </html>

    j’ai pu me rendre compte que quand j’inspecte la page et que je passe la souris sur le fichier main.js qui a été créé dans dist et ajouter par html-webpack-plugin le chemin pour l’url / est bonne c’est-à-dire http://localhost:8080/main.js mais pour l’url /article/id il affiche http://localhost:8080/article/main.js

    J’ai peut être mal configurer mon webpack ou autre chose mais je ne sais pas quoi.

    J’espère que vous pourrez m’aider

  2. #2
    Futur Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    novembre 2016
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : novembre 2016
    Messages : 9
    Points : 5
    Points
    5

    Par défaut

    Bon le problème vient bien de html-webpack-plugin qui ajoute les fichiers en relatif.
    j’ai ajouté dans webpack:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    output: {
    publicPath: ‘/’
    },
    Il fallait que je me décide de poster un message sur le forum pour trouver une solution

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CVS] Configuration de CVSNT avec Eclipse
    Par speedster dans le forum Eclipse Java
    Réponses: 22
    Dernier message: 10/12/2004, 18h15
  2. Les fichiers de configuration de comptes avec Samba
    Par tomnie dans le forum Réseau
    Réponses: 4
    Dernier message: 18/03/2004, 08h30
  3. Pb de configuration postgre -> plantage avec DB error
    Par liv dans le forum Installation
    Réponses: 6
    Dernier message: 05/11/2003, 18h07
  4. Configurer OpenGL/Glut avec C++Bluider
    Par MiGoN dans le forum OpenGL
    Réponses: 2
    Dernier message: 13/09/2002, 23h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo