Recibo el siguiente error cuando intento ejecutar "gulp" en mi proyecto vue.js después de haber agregado una etiqueta de imagen en mi componente Home.vue [ <img class="img-fluid" src="../images/logoWhite.png">
]:
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ModuleParseError: Module parse failed: G:\Projects\Cakes\src\images\logoWhite.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
Leí que este error podría ser causado por babel y cómo está configurado en webpack.config.js. Después de probar algunas de las soluciones enumeradas, todavía no he logrado que funcione. También intenté crear un archivo '.babelrc' con las condiciones preestablecidas para babel, pero aún así no funcionó.
Así es como se ve el archivo 'webpack.config.js':
var webpack = require('webpack')
module.exports = {
entry: [
'./src/main.js'
],
output: {
path: "/dist/js",
publicPath: "/dist/",
filename: "app.js"
},
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: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
{
test: /\.vue$/,
loader: 'vue'
}
]
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
resolve: {
modulesDirectories: ['node_modules']
}
}
En package.json, tengo los siguientes paquetes como mis devDependencies para babel:
"babel-core": "^6.1.21",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.18",
"babel-preset-es2015": "^6.13.2",
"babel-runtime": "^6.3.13"
Gracias de antemano chicos!
La template
sección de un .vue
archivo se carga usando vue-html-loader , que intentará cargar recursos locales (como src
valores de etiquetas de imagen ) usando require(<resource>)
( detalles ).
El error anterior se debe al hecho de que no tiene una configuración de cargador de paquete web para manejar .png
archivos, para solucionarlo necesitaría instalar y configurar un cargador adecuado; algo como esto, con url-loader , debería funcionar:
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras