首先我们要拿到静态资源服务器的ip地址，然后存在一个全局的变量 $STATIC_URL里，这样我们就可以在一对一源码里使用 $STATIC_URL + /路径/图片.png去引用服务器上的图片了

// main.js
app.config.globalProperties.$STATIC_URL = (() => {
  const environmentObj = {
    development: 'http://192.168.10.155:2048', // 本地开发 局域网155
    local: 'http://127.0.0.1:8080', // 本地开发 本机自启服务
    guozi: 'http://10.201.0.222:8889' // 本地开发 国资云222
  }
  // build打包 开发环境(局域网155)、生产环境(IOC161和162)、测试环境(国资云222)的静态资源放在根目录下
  return environmentObj[process.env.NODE_ENV] ? environmentObj[process.env.NODE_ENV] : ''
})()

在 html 中引入

<img :src="$STATIC_URL + '/images/economy-meeting/icons/weather.png'" alt="天气">
<img :src="`${$STATIC_URL}/images/economy-meeting/icons/weather.png`" alt="天气">
<div :style="{backgroundImage: 'url(' + $STATIC_URL + '/images/monitoring/nice-day/bg-age.png)'}">
<div :style="{'background-image': `url(${$STATIC_URL}/images/monitoring/nice-day/bg-age.png)`}">

但这只是在html中引用，如果我们要在less中使用呢？

在 less 中引入

2. 首先需要安装 sass-resource-loader 或者 style-resources-loader，这里以 sass-resources-loader 为例，安装依赖包

   $ npm install sass-resources-loader --save -dev

   

4. 安装完成之后，找到 vue.config.js 文件，添加以下内容（修改完vue.config.js文件记得把项目重新run一次才会生效）

   module.exports = {
       chainWebpack: config => {
       // 使用 sass-resource-loader 插件
       config.module.rule("scss").oneOfs.store.forEach(item => {
           item
           .use("sass-resources-loader")
           .loader("sass-resources-loader")
           .options({
               // 需要插入的文件路径
               // resources: "./src/assets/styles/STATIC_URL.less"
               // 当我们需要根据环境去读取不同的less文件时
               resources: (() => {
                   const environmentObj = {
                       development: './src/assets/styles/STATIC_URL_DEV.less', // 本地开发 局域网155
                       local: './src/assets/styles/STATIC_URL_LOCAL.less', // 本地开发 本机自启服务
                       guozi: './src/assets/styles/STATIC_URL_GUOZI.less' // 本地开发 国资云222
                   }
                   // build打包 开发环境(局域网155)、生产环境(IOC161和162)、测试环境(国资云222)的静态资源放在根目录下
                   return environmentObj[process.env.NODE_ENV] ? environmentObj[process.env.NODE_ENV] : './src/assets/styles/STATIC_URL.less'
               })()
           })
           .end();
       });
     }
   }

   

6. 在 less 文件中添加全局样式（也即静态资源服务器ip）

   // STATIC_URL.less
   @STATIC_URL: 'http://资源服务器ip地址:端口';
   // STATIC_URL_DEV.less
   @STATIC_URL: 'http://192.168.10.155:2048';  // 本地开发 局域网155
   // STATIC_URL_LOCAL.less
   @STATIC_URL: 'http://127.0.0.1:8080';  // 本地开发 本机自启服务
   // STATIC_URL_GUOZI.less
   @STATIC_URL: 'http://10.201.0.222:8889';    // 本地开发 国资云222

   

8. 接下来就可以在 less 中引用服务器上的图片了，直接使用 STATIC_URL

   background-image: url("@{STATIC_URL}/images/economy-meeting/index/department-district-bg.png");

   

在 js 中引入

const img = process.env.VUE_APP_STATIC_URL + '/images/economy/economy-home/index/GDP.jpg'

以上就是一对一源码引用服务器图片的实现了。

声明：本文由云豹科技转发自Jesse90s博客，如有侵权请联系作者删除