Configuration vue.js avec webpack

**Scharkk** · 28/02/2019, 22h36

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