如何基于Vue页面按需导入CSS？通过配置文件循环实现

可以通过自定义配置文件+路由监听循环的方式实现按需加载，具体步骤如下：

1. 创建页面-CSS映射配置文件 #

新建config-page-css.js，定义需要按需加载的页面与对应CSS文件的映射关系：

export default [
  {
    page: 'Home',
    css: '/css/custom.css'
  },
  {
    page: 'About',
    css: '/css/custom.css'
  },
  {
    page: 'Contact',
    css: '/css/contact.css'
  }
]

注：原示例代码存在语法错误，已修正为数组包含对象的正确格式。

2. 在入口文件中添加动态导入逻辑 #

在main.js（或app.js）中，导入配置文件后，结合Vue Router的路由守卫实现按需加载：

import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import configPageCss from './config-page-css.js'
import App from './App.vue'

// 路由规则：每个页面的name需与配置中的page字段对应
const routes = [
  { path: '/', name: 'Home', component: () => import('./views/Home.vue') },
  { path: '/about', name: 'About', component: () => import('./views/About.vue') },
  { path: '/contact', name: 'Contact', component: () => import('./views/Contact.vue') }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 存储已加载的CSS文件，避免重复加载
const loadedCss = new Set()

// 路由守卫：进入页面时加载对应CSS
router.beforeEach((to, from, next) => {
  // 匹配当前页面的CSS配置
  const cssConfig = configPageCss.find(item => item.page === to.name)
  if (cssConfig && !loadedCss.has(cssConfig.css)) {
    // 动态创建link标签加载CSS
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = cssConfig.css
    document.head.appendChild(link)
    loadedCss.add(cssConfig.css)
  }
  next()
})

const app = createApp(App)
app.use(router)
app.mount('#app')

核心逻辑说明： #

• 借助路由beforeEach钩子监听页面跳转，获取当前页面的name
• 匹配配置文件中对应的CSS路径，若未加载过则动态创建<link>标签插入页面头部
• 用Set存储已加载的CSS路径，避免重复加载同一文件

内容的提问来源于stack exchange，提问作者Swallotail