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