qiankun 乾坤主应用访问微应用css静态图片资源报404

周家大小姐.2023-09-15 22:31

发现static前没有加我指定的前缀

只有加了后才会出来

解决方案:

env定义前缀

.env.development文件中

bash 复制代码

# static前缀
VUE_APP_PUBLIC_PREFIX=""

.env.production文件中

bash 复制代码

# static前缀
VUE_APP_PUBLIC_PREFIX="/szgl"

settings文件是封了一下src\settings.js

javascript 复制代码

module.exports = {

  /**
   * public文件前缀
   */
  publicPrefix: process.env.VUE_APP_PUBLIC_PREFIX

}

页面写入

javascript 复制代码

import settings from '@/settings'
  data () {
    return {
      cameraBackground: `url(${settings.publicPrefix}/assets/img/camera.png)`,
      cameraHover: `url(${settings.publicPrefix}/assets/img/camera-hover.png)`,
}}

css 复制代码

.camera {
  position: absolute;
  width: 80px;
  height: 80px;
  cursor: pointer;
  // background-image: url('@/assets/img/camera.png');
  background-image: v-bind(cameraBackground);
  background-size: cover;

}