一对一源码如何进行服务器图片的引用

本文介绍了在Vue.js项目中如何根据不同的开发环境动态引用静态资源服务器上的图片。通过设置全局变量$STATIC_URL并在HTML、JS及LESS中使用,结合vue.config.js配置sass-resources-loader,实现了不同环境下静态资源的引用。详细步骤包括安装依赖、配置vue.config.js以及在各文件类型的引用示例。
摘要由CSDN通过智能技术生成

首先我们要拿到静态资源服务器的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 中引入

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

    $ npm install sass-resources-loader --save -dev
    
  2. 安装完成之后,找到 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();
        });
      }
    }
  3. 在 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
    
  4. 接下来就可以在 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博客,如有侵权请联系作者删除

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值