vue项目部署线上环境css访问public的静态资源问题

vue项目部署线上环境css访问public的静态资源问题

这段时间在部署vue项目的时候，默认的端口已经代理了其他项目，那nginx上只能再拼接一段的代理路径

location /gasFrame {
  alias /usr/software/gas16-9/dist;
  add_header Access-Control-Allow-Origin *;
  allow all;
  index index.html index.htm index.php;
}

加了这一段后，自然而然vue.config.js也是需要加publicPath

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "/gasFrame/" : "",
  };

发现竟然部分静态资源无法访问，比如http://192.168.20.99:8990/img/bb.png,我也好奇为什么这个图片资源没有加gasFrame的一个前缀，原来是这个背景图片当时css的样式是直接访问public下的文件夹的，而public下的资源是不会经过打包压缩的，src下资源才会经过打包压缩，所以我其他地方访问asset下的图片http://192.168.20.99:8990/gasFrame/img/icon.7653ab.png都可以访问到，因此访问public下的资源都需要拼接一段publicPath的前缀，当我想在css上拼接的时候，这个就有点麻烦，需要用到定义变量。

• 首先定义变量

  export default class HelloWorld extends Vue {
    private backgroundImage: any = 'url('+process.env.BASE_URL+'/img/bb.png'+')';
  }
  

• 然后在对应的标签引用该变量

  <img  height="70" width="70" id="tupian"  :style="{'--backgroundImage':backgroundImage}"/>
  

• 最后在css样式上指向该标签的引用

  <style scoped lang="less">
  #tupian{
    background-image: var(--backgroundImage);
  }
  </style>
  

  这样就可以在css上引用到全局变量，如果是直接是放在src属性下就更好改了，只需要在文件的data定义一下publicPath，直接引用就行

  <img :src="${publicPath}my-image.png">
  export default class HelloWorld extends Vue {
    private publicPath: any = process.env.BASE_URL;
  }