Vue 动态改变css文件

原创已于 2024-07-31 09:59:41 修改 · 2.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #前端 #javascript #ecmascript

于 2024-07-29 22:22:20 首次发布

一、背景需求

现有 Vue3 项目，要求点击按钮后，会动态加载css文件内容

二、实现过程

2.1 相关代码

假设有 blue.css 和 red.css,要求点击加载对应文件

若想切换为原版样式，点击 back 回退到初始样式

<script setup>
    import {envConfig} from './envConfig'

  const switchStyle = (type)=>{

    const devPath =  '/public/css/' + type + '.css'
    const prdPath =  './css/' + type + '.css'

    const linkId = '#cssModel'
    let linHref = devPath
    if(envConfig.ENV_TAG !='dev'){
      linHref = prdPath
    }
    
    const model = document.getElementById(linkId)
    if(type!=undefined){
      if(model == null){
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = linHref
        link.id = linkId
        document.head.appendChild(link)
      }else{
        model.setAttribute('href',linHref)
      }
    }
    else if(model !=null){
      model.remove()
    }
  }
</script>

<template>
  <div>this is a simple text</div>
  <button @click="switchStyle('red')">to red</button>
  <button @click="switchStyle('blue')">to blue</button>
  <button @click="switchStyle()">back</button>
</template>

<style scoped>

</style>

三、重点强调

3.1 资源名称变化

vue 项目打包后 (控制台输入 npm run build)，项目中的图片，js，css 文件地址都会改变，如：

index.js 会重命名为 index-e7c5d476.js

只有当他们放置在 public 目录下(允许设置多级子目录)，文件的名称才会不变.

所以 blue.css 和 red.css 是放置在 /publc/css/xxx.css 中

3.2 资源地址变化

类似于上一个问题，打包后的资源地址也会对应改变,如:

/public/css/red.css 会变化为 css/red.css

需要我们根据当前项目环境动态加载地址变量。

设置过程如下：

在 src 同级目录创建 .env 和 .env.prd 文件，内容为(以 .env 文件为例)：

VITE_APP_ENV = 'dev'

在 src 目录下创建 envConfig.js 文件，内容如下：

export const envConfig = {
    ENV_TAG: import.meta.env.VITE_APP_ENV,
  };

对应的文件地址结构为：

此时在代码中可以根据如下逻辑获取环境变量：

<script setup>
    import {envConfig} from './envConfig'
    let env = envConfig.ENV_TAG
</script>

并且在 package.json 中，为 scripts -> build 追加 --mode prd 参数，指定读取哪一个配置文件

若在控制台输入 npm run build 后，log 中看到 --mode prd 字样，则表明设置成功。

3.3 修改资源前缀

在上述文件配置完毕后，即使我们打包了项目文件，也会看到 404 找不到资源的错误提示

页面代码如下：


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <script type="module" crossorigin src="/assets/index-e7c5d476.js"></script>
    <link rel="stylesheet" href="/assets/index-78058d01.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

只有当 src 和 href 中的路径前缀为 ./ 时才能获取到对应资源，也就是说，

要将src="/assets/index-e7c5d476.js" 修改为 src="./assets/index-e7c5d476.js",

href="/assets/index-78058d01.css" 修改为 "href="./assets/index-78058d01.css"

我们可在 vite.conifg.js 中添加参数 base: './' 以去解决问题

四、优化 - 选项持久化

4.1 需求说明

现有优化需求，当用户选择样式后，下一次进入页面会自动加载点击的样式

4.2 依赖下载

控制台输入 npm i pinia-plugin-persistedstate pinia

下载 pinia 以及持久化插件

4.3 环境配置

main.js 内容如下

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

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

createApp(App)
    .use(pinia)
    .mount('#app')

4.4 创建全局变量

定义 currCss 全局变量，记录上一次点击的结果

import { defineStore } from "pinia";
import {ref} from 'vue'

export const useStore = defineStore("store",() => {
        const currCss = ref()
        
        return {
            currCss
        };
    },
    {
        persist: true,
    }
);

4.5 调用全局变量

<script setup>
    import {envConfig} from './envConfig'
    import {useStore} from "./stores/record"
    import {onMounted} from 'vue'

    const store = useStore()

    onMounted(()=>{
      // 页面加载完毕后自动调用该方法
      switchStyle(store.currCss)
    })

    const switchStyle = (type)=>{
      // 记录点击类型
      store.currCss= type
      
      // switchStyle 实现逻辑参考 2.1 代码
      xxxxxxxxxxxxxx
  }
</script>

<template>
  <div>this is a simple text</div>
  <button @click="switchStyle('red')">to red</button>
  <button @click="switchStyle('blue')">to blue</button>
  <button @click="switchStyle()">back</button>
</template>

<style scoped>

</style>

此时每次刷新页面后，都会保留上一次设置的样式，

根据如下浏览器显示结果，每次设置的对象都是保存在 localstorage 中