You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+23-5Lines changed: 23 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,19 @@
1
1
# vue-asset-loader
2
2
3
-
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.
3
+
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.
4
+
5
+
## install
6
+
7
+
To begin, you'll need to install `vue-asset-loader`:
8
+
9
+
```console
10
+
$ npm install vue-asset-loader --save-dev
11
+
```
12
+
13
+
`vue-asset-loader` works like
14
+
[`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.
15
+
16
+
## purpose
4
17
5
18
if your output directory structure is like this:
6
19
@@ -17,28 +30,29 @@ script
17
30
2.js
18
31
```
19
32
1.css load 1.png, the url in source code may be write like this `url(images/1.png)`, to support that, your webpack config maybe like this:
then webpack will translate `images/1.png` to `../images/1.png`, this does solve the issues, but wait, if your html has img tag that:
27
-
```
41
+
```html
28
42
<img src="image/2.png">
29
43
```
30
44
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.
0 commit comments