记录目前使用vue3.2.0&&vite4.2.0时遇到的一些坑-持续更新

[toc]

vue3安装markdown-it

vue ts使用markdown-it需要使用以下命令安装才行

npm install --save markdown-it @vue/compiler-sfc

来源https://juejin.cn/s/vue3%20markdown-it

link中引用node_modules中css样式打包后丢失

~~在main.ts中导入该样式重新打包即可，猜测应该是因为路径引用并不会触发vite的打包逻辑~~

在link中引用css最好还是直接用生产域名直接方便有效，vite似乎可以配置环境变量来区分生产环境和测试环境，不过我的项目不复杂，直接用配置文件来区分就好了

arm平台`npm run dev`时报错 `at Object.networkInterfaces`

error when starting dev server:
SystemError [ERR_SYSTEM_ERROR]: A system error occurred: uv_interface_addresses returned Unknown system error 13 (Unknown system error 13)
    at Object.networkInterfaces (node:os:277:16)
    at resolveServerUrls (file:///root/work/product/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:12512:28)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.listen (file:///root/work/product/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:65106:39)
    at async CAC.<anonymous> (file:///root/work/product/node_modules/vite/dist/node/cli.js:776:9)

修改 /vite.config.ts 从文件首行添加以下代码

//解决arm平台报错问题
try {
  require('os').networkInterfaces()
} catch (e) {
  require('os').networkInterfaces = () => ({})
}

打包发布到nginx的子路由时无法访问,如https://xxx.com/product/

修改 /<项目路径>/router/index.ts文件如下，原理尚未可知

 const router = createRouter({
  history: createWebHashHistory(import.meta.env.VITE_BASE_PATH),
  routes,
})

修改 /vite.config.ts 如下添加base属性为你的项目真实域名https://xxx.com/product/

export default defineConfig(({ command, mode }) => {
  return {
    base: "https://xxx.com/product/"
    }
}

niginx配置，任意server 中添加一下配置

location /product {
        alias <你的网站根目录>;  # 网站根目录 如 /www/xxx/product
        index index.html;   # 默认首页文件
}

关于属性绑定界面不自动刷新问题、

使用以下两种方式创建的属性在修改后可以稳定触发控件的重新渲染

对于用于对象的绑定需使用reactive()包裹，如下

let items = reactive(Array<any>())
//创建后正常修改即可触发界面刷新

对于用于值的绑定须使用ref()进行创建，如下

//创建方法
const height = ref(window.innerHeight - heightOffset)

//设置新的值方法
height.value = window.innerHeight - heightOffset

ref()获取DOM元素对象的方法

<template>
<div ref="test">
</div>
</template>
<script lang='ts' setup>
const test = ref()

function dosomething(){
//确保dom渲染完成后调用
const element = test.value
}
</script>

$on的最轻量级替代方法使用document.dispatchEvent()

//创建自定义事件
const streamDoneEvent = new Event('eventName')||new CustomEvent('eventName',{detail:{/*any obj*/}})
//发射自定义事件
document.dispatchEvent(streamDoneEvent)
//监听自定义事件
document.addEventListener('streamDone', onSteamDone, false)