Vue/Cli4 引用静态图片

前言

本教程适用于 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",
     // 上面两行千万别设置,不然使用nginx部署的时候,会报错!!!!!!!!!!!!
   
   
   
     // 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中的资源图片.

后记

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