Vue 动态改变css文件

---

theme: smartblue

一、背景需求

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

二、实现过程

2.1 相关代码

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

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

```

this is a simple text

to red to blue back

```

三、重点强调

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 = { ENVTAG: import.meta.env.VITEAPP_ENV, };

```

对应的文件地址结构为：

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

```

```

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

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

3.3 修改资源前缀

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

页面代码如下：

```

rel="icon" type="image/svg+xml" href="/vite.svg"> rel="stylesheet" href="/assets/index-78058d01.css">

```

只有当 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 调用全局变量

```

this is a simple text

to red to blue back

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

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

4.6 参考文档

快速开始 | pinia-plugin-persistedstate (prazdevs.github.io)