vue文件管理

vue图片管理图片加载1.加载url-loadernpm install --save-dev url-loader2.配置webpack.config.jsmodule.exports = {module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{...

两人走

3090人浏览 · 2020-03-01 21:27:57

两人走 · 2020-03-01 21:27:57 发布

vue图片管理

图片加载

1.加载url-loader

npm install --save-dev url-loader

2.配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

3.简单得用法

import img from './image.png'

示例:

1.文件结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x6CvSf1x-1583069240292)(D:\总结\vue\文件管理.png)]

2.css文件

body{
    /*background-color: red;*/
    background: url("../img/luna.jpg");
}

3.js文件

require('./css/normal.css')

4.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="./dist/bundle.js"></script>
</body>
</html>

5.webpack.config.ja

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 500
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            }
        ]
    }
}

问题:图片文件超过我们设置大小

如果出现下面异常

> meetwebpack@1.0.0 build D:\JAVAWEB\vue\vuespace\02day-study\01day-lession
> webpack

Hash: 48e2a2576e30b2817c6d
Version: webpack 3.6.0
Time: 579ms
    Asset     Size  Chunks             Chunk Names
bundle.js  16.6 kB       0  [emitted]  main
   [0] ./src/main.js 292 bytes {0} [built]
   [1] ./src/js/mathUtils.js 154 bytes {0} [built]
   [2] ./src/js/info.js 83 bytes {0} [built]
   [3] ./src/css/normal.css 568 bytes {0} [built]
   [5] ./node_modules/css-loader/dist/cjs.js!./src/css/normal.css 619 bytes {0} [built]
   [8] ./src/img/luna.jpg 1.42 kB {0} [built] [failed] [1 error]
    + 3 hidden modules

ERROR in ./src/img/luna.jpg
Module build failed: Error: Cannot find module 'file-loader'
Require stack:
- D:\JAVAWEB\vue\vuespace\02day-study\01day-lession\node_modules\url-loader\dist\index.js
- D:\JAVAWEB\vue\vuespace\02day-study\01day-lession\node_modules\url-loader\dist\cjs.js
- D:\JAVAWEB\vue\vuespace\02day-study\01day-lession\node_modules\loader-runner\lib\loadLoader.js
- D:\JAVAWEB\vue\vuespace\02day-study\01day-lession\node_modules\loader-runner\lib\LoaderRunner.js
- D:\JAVAWEB\vue\vuespace\02day-study\01day-lession\node_modules\webpack\lib\NormalModule.js
- D:\JAVAWEB\vue\vuespace\02day-study\01day-lession\node_modules\webpack\lib\NormalModuleFactory.js
- D:\JAVAWEB\vue\vuespace\02day-study\01day-lession\node_modules\webpack\lib\Compiler.js
- D:\JAVAWEB\vue\vuespace\02day-study\01day-lession\node_modules\webpack\lib\webpack.js
- D:\JAVAWEB\vue\vuespace\02day-study\01day-lession\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
    at Function.Module._load (internal/modules/cjs/loader.js:864:27)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.loader (D:\JAVAWEB\vue\vuespace\02day-study\01day-lession\node_modules\url-loader\dist\index.js:66:20)
 @ ./node_modules/css-loader/dist/cjs.js!./src/css/normal.css 4:36-62
 @ ./src/css/normal.css
 @ ./src/main.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! meetwebpack@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the meetwebpack@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\BW\AppData\Roaming\npm-cache\_logs\2020-03-01T12_42_02_828Z-debug.log

这时我们就需要添加file-loader

npm install file-loader --save-dev

这是就会再dist文件下打包出一个图片,运行成功

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^