Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gxlmyacc/vue-asset-loader
a file-loader wrapper for Vue solve the image relative path issues when output`s HTML and CSS not in the same directory
https://github.com/gxlmyacc/vue-asset-loader
file-loader url-loader vue vue-asset-loader webpack
Last synced: about 1 month ago
JSON representation
a file-loader wrapper for Vue solve the image relative path issues when output`s HTML and CSS not in the same directory
- Host: GitHub
- URL: https://github.com/gxlmyacc/vue-asset-loader
- Owner: gxlmyacc
- License: mit
- Created: 2018-06-17T09:16:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-09T05:51:47.000Z (about 2 years ago)
- Last Synced: 2024-10-31T19:54:58.442Z (about 2 months ago)
- Topics: file-loader, url-loader, vue, vue-asset-loader, webpack
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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.
[](https://npmjs.com/package/vue-asset-loader)
[](https://npmjs.com/package/vue-asset-loader)
## install
To begin, you'll need to install `vue-asset-loader`:
```bash
npm install vue-asset-loader --save-dev
```
or
```bash
yarn add -D vue-asset-loader
```
`vue-asset-loader` works like
[`file-loader`](https://github.com/webpack-contrib/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:
```text
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:
```html
...some css...
.some-selector {
background: url(images/1.png);
}
...some css...
```
to support that output directory structure, your webpack config maybe like this:
```js
{
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:
```html
...some html...
...some html...
```
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:
```js
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
use: [
{
loader: 'vue-asset-loader',
options: {
publicPath: '',
publicStylePath: '../',
name: 'images/[name].[ext]?[hash]'
}
]
}
```
or
```js
{
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`.
## License
[MIT](./LICENSE)