vue-asset-loader
v1.0.1
Published
a file-loader for Vue solve the image relative path issues when HTML and CSS not in the same directory
Downloads
185
Maintainers
Readme
vue-asset-loader
This is a file-loader
wrapper for Vue and Webpack, solve the image relative path issues when HTML and CSS are not in the same directory.
install
To begin, you'll need to install vue-asset-loader
:
npm install vue-asset-loader --save-dev
or
yarn add -D vue-asset-loader
vue-asset-loader
works like
file-loader
, but solve a file-loader`s relative path issue when image, css and html in diffrence directorys.
purpose
if your output directory structure is like this:
index.html
images
1.png
2.png
styles
1.css
2.css
script
1.js
2.js
1.css load 1.png, the url in vue style
section may be write like this:
<style>
...some css...
.some-selector {
background: url(images/1.png);
}
...some css...
</style>
to support that output directory structure, your webpack config maybe like this:
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
use: [{ loader: 'file-loader', options: { publicPath: '../', name: 'images/[name].[ext]?[hash]' }]
}
then webpack will translate images/1.png
to ../images/1.png
, this does solve the issues, but wait, if your vue template
section has img tag that:
<template>
...some html...
<img src="image/2.png">
...some html...
</template>
webpack will translate images/2.png
to ../images/2.png
, it leads html load 2.png
failure, so file-loader can't tell the picture from HTML or CSS.
vue-asset-loader
just solving this issues!
your webpack config can be like this:
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
use: [
{
loader: 'vue-asset-loader',
options: {
publicPath: '',
publicStylePath: '../',
name: 'images/[name].[ext]?[hash]'
}
]
}
or
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 2048,
publicPath: '',
publicStylePath: '../',
fallback: 'vue-asset-loader',
name: 'images/[name].[ext]?[hash]'
}
]
}
vue-asset-loader
will choose publicPath
or publicStylePath
based on the image from vue template
or vue style
.