// 这种打包会有一些问题 比较麻烦
···
  return {
    ···
    // vite 相关配置
    server: {
        ···
        '/dev-api': {
          target: '请求接口地址', 
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
        }
      }
    },

    css: {
     ···
    },
    // 配置全局 用来设置图片文件访问地址
    define: {
      'process.env': {
        "process.env": "请求接口地址" 
      }
    }
    // 使用方法 在需要的页面使用 如果全局变量不存在的话,会使用默认值
    // const baseImgUrl = inject("baseImgUrl", ref(process.env.VUE_APP_IMGAPI)); 
  }
})
// main.js 里面
// app.provide("baseImgUrl", process.env['process.env'])
// 打包最好用这种 在main.js中定义全局变量
const baseImgUrl = 'http://******'; 
app.config.globalProperties.$baseImgUrl = baseImgUrl;




// 页面中使用
import { getCurrentInstance, ComponentInternalInstance } from "vue";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance() as ComponentInternalInstance;
const baseImgUrl = globalProperties.$baseImgUrl;

Logo

前往低代码交流专区

更多推荐