Vue 3 + Vite

TITLE

该方法仅适用于vue3+vite构建的项目

buried_point_common_vite

插件使用方法

安装 buried_point_common_vite

npm install buried_point_common_vite
# NOTE: or
yarn add buried_point_common_vite

全局引入

• vue3

import buried from 'buried_point_common_vite'
app.use(buried)

埋点参数标准

行为列表

参数统一建议

// FIXME: 建议
- 存储到vuex中的参数：
{
	client_version,action_type,user_type
}
- 当前页面变动参数
{
	user_id
}
- 需要单独设置的参数
{
	action_id,
}
- 封装方法导出的参数
{
	connection_id,current_view_id,event_id,arise_time
}
- 扩展参数
 {
	phone_num,product_name,product_id,source_platform,advertising
 }

参数进行assign即可，目前的常量参数没有进行封装，后面可以进行代码级的优化

优化建议

• 常量参数封装
• 方法参数统一
• 指令和全局函数使用
• 埋点添加标识

页面使用

// HACK: 埋点节点 根据实际业务进行更改
<input v-track="params"/>
<button @clicl="buried">click埋点节点</button>
import { getCurrentInstance ,reactive} from "vue";
const { proxy, appContext } = getCurrentInstance();
const globalProxy = appContext.config.globalProperties;
// HACK: 参数请根据埋点参数标准进行配置 
const params = reactive({
       			event_id: 'params_event_id',
				action_id: 'params_action_id',
				action_type: 'params_action_type',
				user_type: 'params_user_type',
				user_id: 'params_user_id',
})
let buried = () => {
  globalProxy.$track(params);
};

环境变量

# NOTE:  vite 默认配置
NODE_ENV = 'dev'

VITE_APP_MODE = dev

VITE_APP_PROXY_URL = "https://api-test.ennejb.cn"

VITE_APP_BASE_URL = "/news"

VITE_APP_URL = "/activity_h5"

暴露方法和指令

1、全局挂载指令 v-track="trackData"

2、暴露全局方法 $track(this.trackData);

特殊说明

埋点函数地址为公司内部使用，仅限公司内部项目使用