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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 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中配置

?

1 2 3 4 5 6

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

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

?

1 2 3 4 5

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文件