欢迎加入开源鸿蒙PC社区： https://harmonypc.csdn.net/
欢迎在PC社区平台申请新建项目：https://atomgit.com/OpenHarmonyPCDeveloper
AtomGit 仓库地址：https://atomgit.com/OpenHarmonyPCDeveloper/ohos_node_vue_ts

---

1. 环境搭建：

该文完整梳理了ARM64架构鸿蒙PC（HarmonyOS/OpenHarmony6.1及以上），基于CodeArts IDE搭建Vite+Vue前端项目的全流程与疑难解决方案。项目实操中，Vite启动会出现rolldown原生模块权限拒绝报错，根源是鸿蒙系统拦截未签名二进制文件，最终解决方案为引入ohos-signpost自动签名工具，配置npm后置钩子，在依赖安装完成后自动为所有.node文件添加系统合法签名，消除权限校验拦截，最终实现CodeArts IDE内Vue+TS项目正常启动、调试。

可以参考文章：
OpenHarmony 鸿蒙 PC + CodeArts IDE 前端 Vite+Vue 完整开发环境搭建指南:https://blog.csdn.net/wanmeijuhao/article/details/161925265

---

Vue3 + js-cookie 完整示例（组合式API + 选项式API两种写法）

1. 安装依赖

npm install js-cookie

2. 全局挂载（推荐，全局直接使用$cookie）

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import Cookies from 'js-cookie'

const app = createApp(App)
// 挂载全局属性
app.config.globalProperties.$cookie = Cookies

app.mount('#app')

3. 组合式API示例（setup语法糖，Vue3主流）

CookieDemo.vue

<template>
  <div class="cookie-demo">
    <h3>js-cookie 使用示例</h3>
    <div>
      <button @click="setCookie">设置普通cookie</button>
      <button @click="setExpireCookie">设置7天过期cookie</button>
      <button @click="setObjCookie">存储对象cookie</button>
      <button @click="getCookie">读取cookie</button>
      <button @click="removeCookie">删除cookie</button>
      <button @click="clearAllCookie">清除全部</button>
    </div>
    <p>读取结果：{{ cookieVal }}</p>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import Cookies from 'js-cookie'

// 方式1：直接导入Cookies使用（推荐）
// 方式2：获取全局挂载的cookie
const { proxy } = getCurrentInstance()

const cookieVal = ref('')

// 1. 设置简单cookie
const setCookie = () => {
  Cookies.set('username', '张三')
  // proxy.$cookie.set('username', '张三')
  alert('cookie 设置成功')
}

// 2. 设置过期时间（单位：天）
const setExpireCookie = () => {
  Cookies.set('token', 'abcd123456', { expires: 7 })
}

// 3. 存储对象（自动JSON序列化）
const setObjCookie = () => {
  const userInfo = { id: 1, name: '李四', age: 20 }
  Cookies.set('user', userInfo)
}

// 4. 读取cookie
const getCookie = () => {
  // 读取字符串
  const name = Cookies.get('username')
  // 读取对象自动转json
  const user = Cookies.getJSON('user')
  cookieVal.value = `username:${name}，用户信息：${JSON.stringify(user)}`
}

// 5. 删除单个cookie
const removeCookie = () => {
  Cookies.remove('username')
  Cookies.remove('token')
}

// 6. 删除所有cookie（遍历清除）
const clearAllCookie = () => {
  Object.keys(Cookies.get()).forEach(cookieName => {
    Cookies.remove(cookieName)
  })
  cookieVal.value = ''
}
</script>

4. 选项式API示例（兼容老写法）

<template>
  <div>
    <button @click="loginSaveToken">登录存储token</button>
  </div>
</template>

<script>
export default {
  methods: {
    loginSaveToken() {
      // 使用全局$cookie
      this.$cookie.set('token', 'xxxx-token-xxx', {
        expires: 30,
        path: '/' // 全站生效
      })
    }
  }
}
</script>

5. 常用配置参数说明

// 完整配置项
Cookies.set('key', 'value', {
  expires: 30,    // 过期天数
  path: '/',      // 生效路径，/代表全站
  domain: '',     // 域名，跨子域使用
  secure: true,   // 仅https下生效
  sameSite: 'Lax' // 防跨站
})

6. 封装工具类（项目统一管理cookie，最佳实践）

新建 src/utils/cookie.js

import Cookies from 'js-cookie'

// 设置cookie
export function setCookie(key, value, days = 7) {
  return Cookies.set(key, value, { expires: days, path: '/' })
}

// 获取cookie
export function getCookie(key) {
  return Cookies.get(key)
}

// 获取JSON对象cookie
export function getCookieJson(key) {
  return Cookies.getJSON(key)
}

// 删除cookie
export function removeCookie(key) {
  return Cookies.remove(key, { path: '/' })
}

// 清空全部cookie
export function clearCookie() {
  Object.keys(Cookies.get()).forEach(item => {
    Cookies.remove(item, { path: '/' })
  })
}

在组件中使用封装工具

import { setCookie, getCookie } from '@/utils/cookie'

setCookie('token', '123456', 15)
console.log(getCookie('token'))

---

<template>
  <div class="cookie-demo">
    <h3>js-cookie 使用示例</h3>
    <div>
      <button @click="setCookie">设置普通cookie</button>
      <button @click="setExpireCookie">设置7天过期cookie</button>
      <button @click="setObjCookie">存储对象cookie</button>
      <button @click="getCookie">读取cookie</button>
      <button @click="removeCookie">删除cookie</button>
      <button @click="clearAllCookie">清除全部</button>
    </div>
    <p>读取结果：{{ cookieVal }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Cookies from 'js-cookie'

const cookieVal = ref('')

// 1. 设置简单cookie
const setCookie = () => {
  Cookies.set('username', '张三')
  alert('cookie 设置成功')
}

// 2. 设置7天过期cookie
const setExpireCookie = () => {
  Cookies.set('token', 'abcd123456', { expires: 7 })
}

// 3. 存储对象（手动JSON序列化）
const setObjCookie = () => {
  const userInfo = { id: 1, name: '李四', age: 20 }
  Cookies.set('user', JSON.stringify(userInfo))
}

// 4. 读取cookie（修复getJSON报错）
const getCookie = () => {
  const name = Cookies.get('username')
  const userStr = Cookies.get('user')
  const user = userStr ? JSON.parse(userStr) : null
  cookieVal.value = `username:${name}，用户信息：${JSON.stringify(user)}`
}

// 5. 删除单个cookie
const removeCookie = () => {
  Cookies.remove('username')
  Cookies.remove('token')
}

// 6. 删除所有cookie
const clearAllCookie = () => {
  Object.keys(Cookies.get()).forEach(cookieName => {
    Cookies.remove(cookieName)
  })
  cookieVal.value = ''
}
</script>

结果演示：

---

总结：

配套ARM64架构OpenHarmony6.1及以上PC端开发教程：使用CodeArts IDE搭建Vite+Vue+TS项目时，rolldown的.node原生文件会因系统未签名拦截报错；解决方案是接入ohos-signpost签名工具，配置npm钩子自动为二进制文件签名，解决权限问题，实现正常启动调试。

js-cookie Vue3完整使用指南

1. 基础安装：执行npm install js-cookie引入库
2. 两种引入使用方式

• 全局挂载：在main.js绑定至Vue实例，组件内通过this.$cookie调用（适配选项式API）
• 局部导入：组件直接import Cookies，组合式setup语法糖优先使用

3. 全套API实操示例
   覆盖设置普通Cookie、带过期时效Cookie、存储对象、读取、单条删除、清空全部Cookie；补充修复方案：手动序列化/解析JSON，规避getJSON异常。
4. 配置参数
   支持过期天数、访问路径、域名、HTTPS安全、SameSite跨站防护等配置项。
5. 工程最佳实践
   封装独立cookie工具函数，统一管理增删查逻辑，项目组件直接导入调用，便于维护。