Vue/Cli4 引用静态图片

发布时间:2020-07-30 22:01:17发布者:Mr.Zhang阅读(357)

前言

本教程适用于 Vue-Cli v3 v4

网上教程零零散散,所以这里我作一下总结,可能与您的代码有所偏差,希望指出,但是勿喷.谢谢!

准备

由于安的包比较多,所以,在我印象中这个教程安装这两个就行了

cnpm i node-sass
cnpm i sass-loader

干正事

  1. 首先找到我们根目录[node_modules 同级]下的vue.config.js(没有的话自己创建)

    // vue.config.js
    const path = require('path');
    
    function resolve(dir) {
        //__dirname为项目根目录,node的express方法中也有使用,join为javascript连接符
        return path.join(__dirname, dir)  
    }
    
    module.exports = {
      publicPath: process.env.NODE_ENV === 'production' ? '/public/' : '/',
      assetsDir: "assets",
      // chainWebpack这里是比较重要的
      chainWebpack: (config) => {
        config.resolve.alias
          .set('@', resolve('src'))
          .set('assets', resolve('src/assets'))
      },
      pluginOptions: {
        // 假设报 style-resources-loader错误,请安装style-resources-loader;
        'style-resources-loader': {
          preProcessor: 'sass',
          patterns: []
        }
      }
    }
    

    这里说明一下chainWebpack:
    图片一般保存在public或src/assets文件夹里面,这里set('@', resolve('src'))做的事情就是将 @/assets变成成src/assets.

  2. 来到我们的Style标签下面

    <style scoped lang='scss'> 
      /* 在标签中设置 lang='sass' */  
      .demo {
      background: url("~assets/img/BgImg.png") no-repeat;
      }
    </style>
    

    "~assets/img/BgImg.png"url前面必须带有一个~,否则无法访问到我存放在assets里面的资源,

    后面的assets根据我们在 vue.config.js 中的 chainWebpack set('assets', resolve('src/assets'))解析到了src/assets目录,故访问到了我存在assets/img/BgImg.png中的资源图片.

后记

这篇教程可能有很多不怎么专业的用词,请看到的大佬帮忙指出.谢谢!





本文转自博客园,原文地址:https://www.cnblogs.com/RemMai/p/13403543.html

自己做的一款记账小程序,请多多支持