1 Star 0 Fork 0

dairoot / zanePerfor

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
vue.md 1.95 KB
一键复制 编辑 原始数据 按行查看 历史
wangweianger 提交于 2023-05-19 14:40 . docs: 文档优化

Vue 项目使用SDK:

  • 进去app目录下public文件夹,解压web-report-vue-min.zip。将里面的文件复制到自己项目下,找到public文件夹或者根目录文件夹下的index.html。添加以下代码:
   <script src ="./web-report-vue-min.js"></script>
   <script defer>
   window.Performance({
      domain: `http://report.com/api/v1/report/web`, //此处的report.com指你自己部署的域名,假如是本机启动填127.0.0.1
      add: {
        appId: "ZzdSi3P1683682161087XXX",
     },
   });
  </script>

这里向大家分享一下不同环境下使用的方法:

  • Vue2: 可以在 .env.build 等环境配置文件配置环境变量,例如: VUE_APP_BASE_URL=/abc/index
<script src="<%= VUE_APP_BASE_URL %>/cdn/sdk/web-report-axios.min.js"></script>
<script defer>
window.Performance({
        domain: '<%= VUE_APP_BASE_URL %>/api/v1/report/web',
        add: {
          appId: 'Ac3pkKd1675993494568',
        },
      });
</script>
  • Vue3: 可以在 .env.build 等环境配置文件配置环境变量,例如: VITE_BUILD_HOST = 'http://xxxxx:7001'

  • 然后在Vite.config.ts中新增插件:createHtmlPlugin -> npm install createHtmlPlugin -D。然后在plugins中配置以下代码

createHtmlPlugin({
        minify: true,
        pages: [
        {
            // entry: "src/main.ts",
            filename: "index.html",
            template: "index.html",
            injectOptions: {
            data: {
                // title: "index",
                injectScript: `<script type ="module" src="/src/utils/inject.ts" defer></script>`,
            },
            },
        },
        ],
    }),

在src下的utils文件夹新增文件inject.ts

window.Performance({
    domain: `${window._process_env.VITE_BUILD_HOST}/api/v1/report/web`,
    add: {
    appId: "ZzdSi3P1XXXX2161087",
    },
});

这样就可以动态的引入各个环境的域名前缀,部署到各个环境啦。

马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/dairoott/zane-perfor.git
git@gitee.com:dairoott/zane-perfor.git
dairoott
zane-perfor
zanePerfor
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891