Vue+Tailwind导航栏不显示问题求助（含完整代码）

安全阿岳

2026-8-19

Vue 首页空白、导航栏组件不显示问题排查与修复

我是Vue新手，运行npm run dev后首页空白，导航栏组件无法显示，尝试多种方法仍未解决。前端使用Vue.js，后端搭配DRF，以下是相关代码及配置文件：

<!--navbar.vue-->
<template>
    <nav class="flex justify-between p-6 px-4">
        <div class="flex justify-between items-center w-full">
            <div class="x1:w-1/3">
                <a class="block max-w-max">
                    <img class="h-8" src="../public/img/logo.png" alt="logo">
                </a>
            </div>
            <div class="hidden x1:block x1:w-1/3">
                <ul class="flex justify-center">
                    <li class="mr-12">
                        <router-link
                            class="text-coolGray-500 hover:text-coolGray-900 font-medium"
                            active-class="active"
                            to="{name:'Chatbot'}"
                            >
                            Chatbot
                        </router-link>
                    </li>
                    <li class="mr-12">
                        <router-link
                            class="text-coolGray-500 hover:text-coolGray-900 font-medium"
                            active-class="active"
                            to="{name:'History'}"
                            >
                            History
                        </router-link>
                    </li>
                    <li class="mr-12">
                        <router-link
                            class="text-coolGray-500 hover:text-coolGray-900 font-medium"
                            active-class="active"
                            to="{name:'Requests'}"
                            >
                            Requests
                        </router-link>
                    </li>
                    <li></li>
                </ul>

            </div>
            <div class="hidden x1:block x1:w-1/3">
                <div class="flex justify-end">
                    <div class="flex items-center justify-end">
                        <div v-if="!isAuthenticated" class="mr-4">
                            <router-link
                                class="text-coolGray-500 hover:text-coolGray-900 font-medium"
                                active-class="active"
                                to="{name:'Login'}"
                                >
                                Login
                            </router-link>
                            <router-link
                                class="text-coolGray-500 hover:text-coolGray-900 font-medium"
                                active-class="active"
                                to="{name:'Register'}"
                                >
                                Register
                            </router-link>
                        </div>
                        <div v-else class="mr-4">
                            <router-link
                                class="text-coolGray-500 hover:text-coolGray-900 font-medium"
                                active-class="active"
                                to="{name:'Profile'}"
                                >
                                Profile
                            </router-link>
                            <router-link
                                class="text-coolGray-500 hover:text-coolGray-900 font-medium"
                                active-class="active"
                                to="{name:'Logout'}"
                                >
                                Logout
                            </router-link>
                    </div>
            </div>
        </div>
        </div>
        </div>
        <button class="navbar-burger self-center x1:hidden">
            <svg width="35" height="35" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect class="text-coolGray-50" width="32" height="32" rx="6" fill="currentColor"></rect>
                <path class="text-coolGray-500" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor">
                </path>
            </svg>
        </button>
    </nav>

</template>

<script>
    import {mapGetters} from 'vuex';

    export default{
        name:"navbar",
        computed:{
            ...mapGetters(['isAuthenticated'])
        }


    }

</script>

App.vue

<script >
  import navbar from './components/navbar.vue';

  export default {
    components: {
      navbar,
    },
  };
  
</script>

<template>
  <div id="app">
    <navbar />
    <router-view></router-view>
  </div>
</template>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],
  theme: {
    extend: {},
corePlugins: {},
plugins: [],
}

postcss.config.cjs

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

问题排查与修复方案

1. 修复main.js版本兼容问题

代码混用了Vue 2和Vue 3初始化语法，且缺失路由、Vuex依赖导入：

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
// 导入路由实例（需提前创建router/index.js）
import router from './router'
// 导入Vuex store（需提前创建store/index.js）
import store from './store'

createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

2. 修复导航栏组件语法错误

闭合未完成的标签：在navbar.vue的v-else块末尾添加</div>
修正响应式类名：将所有x1:替换为xl:（Tailwind大屏断点为xl）

3. 修复Tailwind CSS配置

删除tailwind.config.cjs中的corePlugins: {}，该行会禁用所有核心样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 补充路由与Vuex配置

创建router/index.js并配置对应路由：

import { createRouter, createWebHistory } from 'vue-router'
import Chatbot from '../views/Chatbot.vue'
import History from '../views/History.vue'

const routes = [
  { path: '/', name: 'Chatbot', component: Chatbot },
  { path: '/history', name: 'History', component: History },
  // 补充其他路由
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

创建store/index.js并定义isAuthenticated getter：

import { createStore } from 'vuex'

export default createStore({
  state: { isAuthenticated: false },
  getters: {
    isAuthenticated: state => state.isAuthenticated
  }
})

5. 修正图片路径

public目录下的资源直接使用根路径，将../public/img/logo.png改为/img/logo.png。

内容的提问来源于stack exchange，提问作者Haytham A. Ichahbane

Vue+Tailwind导航栏不显示问题求助（含完整代码）

navbar.vue #

App.vue #

main.js #

tailwind.config.cjs #

postcss.config.cjs #

问题排查与修复方案 #

1. 修复main.js版本兼容问题 #

2. 修复导航栏组件语法错误 #

3. 修复Tailwind CSS配置 #

4. 补充路由与Vuex配置 #

5. 修正图片路径 #

navbar.vue