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