3
I’m having trouble attaching the images contained in src of HTML5 within a route taken in the vue-router, for the Webpack does not find the image at the root of the project, see the structure:
C:.
| index.html
| gulpfile.js
| webpack.config.js
|
+---src-source
| | main.js
| |
| \---view
| | *.vue
| |
| \---guide
| | index.vue
| | *.vue
|
\---image-source
| dashboard.png
| *.png
Utilise gulp to minify the files and it executes the settings of the webpack.config.js presenting this error
Observing the error, it looks for the image in the following directory:
C:\Users\iComputer\livcape2\node_modules\image-source
If I put the case image-source inside node_modules he will be able to upload the image, in the Template HTML of Vue I require this way:
// index.vue
<img alt="Dashboard" src="~image-source/dashboard.png" title="Dashboard">
The Versions of NodeJS and of npm are those:
NodeJS: v4.4.7
npm: 3.10.5
And finally, the configuration made in webpack.config.js:
var webpack = require('webpack'),
path = require('path');
module.exports = {
entry: './src-source/main.js',
output: {
path: '/dist', // simplesmente diz ao Webpack qual caminho ele deve usar para salvar os arquivos finais.
filename: 'build.js'
},
resolve: {
root: path.resolve(__dirname)
},
//watch: true,
module: {
loaders: [
{
test: /\.js$/,
// excluding some local linked packages.
// for normal use cases only node_modules is needed.
exclude: /node_modules|vue\/src|vue-router\//,
loader: 'babel'
},
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
}
]
},
vue: {
loaders: {
js: 'babel'
}
},
// example: if you wish to apply custom babel options
// instead of using vue-loader's default:
babel: {
presets: ['es2015', 'stage-3'],
plugins: ['transform-runtime'],
comments: false
},
resolve: {
extensions: ['', '.js', '.vue']
}
}
I don’t understand how to point to raiz project, if you have any plugin that solves this problem I am grateful.

Did you use any of the Vue-cli templates or set up the webpack scheme in your hand (that’s what it looks like)? to point to the root you can use
path.resolve()– Pliavi