前言

本教程适用于 Vue-Cli v3 v4

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

准备

由于安的包比较多,所以,在我印象中这个教程安装这两个就行了
经过测试,这两个包可以不用安装

cnpm i node-sass
cnpm i sass-loader

干正事

首先找到我们根目录[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.

来到我们的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中的资源图片.

后记

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

Vue/Cli4 引用静态图片

前言

准备

干正事

后记

相关推荐