Vue-router: route non trouvée


#1

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:

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:

    //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'
        })
    ]
};


    //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)
});


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

Bon le problème vient bien de html-webpack-plugin qui ajoute les fichiers en relatif.
j’ai ajouté dans webpack:
output: {
publicPath: ‘/’
},
Il fallait que je me décide de poster un message sur le forum pour trouver une solution :stuck_out_tongue: