nuxt开发问题记录

1.nuxt加载svg 用的是nuxt-icons

modules: ["@element-plus/nuxt", "nuxt-lodash", "@pinia/nuxt", "@nuxtjs/tailwindcss", "nuxt-icons", "@nuxtjs/device"],

使用的时候  我遇到了svg整个是黑色的  

<NuxtIcon name="pc" class="h-[20px] w-[20px] no-fill-icon" /> 

<NuxtIcon name="shortcuts_logo" class="mb-[10px] h-[50px] w-[50px]" filled/>  filled表示用他的颜色充满

如果想要变色的话 

.no-fill-icon,.no-fill-icon * {

fill:none !important;

}

网上还是通过:hover控制变色的也可以，但是需要尝试，后来发现存在一定问题

2.@nuxtjs/device 查询是mobile还是pc 

并且在根目录建立 composables文件夹 useWindowSize.ts

// composables/useWindowSize.ts
import { ref, onMounted, onUnmounted } from 'vue';

export function useWindowSize() {
  const width = ref(0);
  const height = ref(0);

  const updateSize = () => {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  };

  onMounted(() => {
    if (process.client) {
      window.addEventListener('resize', updateSize);
      updateSize();
    }
  });

  onUnmounted(() => {
    if (process.client) {
      window.removeEventListener('resize', updateSize);
    }
  });

  return { width, height };
}

在具体的组建中

import { useWindowSize } from '@/composables/useWindowSize';

const { width } = useWindowSize();

3.setPageLayout和definePageLayout修改布局

setPageLayout(false)

setPageLayout('pchat')

或者最开始在onMounted可以用

definePageMeta({

layout: false

});

4.环境变量

nuxt.config.ts中配置

runtimeConfig: {
    public: {
      apiBaseUrl: process.env.VITE_AGENT_BASE_URL,
      linkMainSiteUrl: process.env.VITE_LINK_MAIN_URL
    }
  },

linkMainSiteUrl是个环境变量，在真实组建中

const runtimeConfig = useRuntimeConfig()
const linkLogin = ()=>{
    const { agent_type, agent_id } = route.params;
    location.href = `${runtimeConfig.public.linkMainSiteUrl}/chat/${agent_type}/${agent_id}?login`;   
}

5.比如我想要archives/:type/:id   建立文件夹时需要上层是[type]下面一层是[id].vue文件