我們在我的應用程序中使用Vue.js和Vuetify。作為我的應用程序的一部分，我將在頁面加載時基于API響應進行API調用，整個應用程序將呈現所有組件。作為這個API的一部分，我將獲得名為cssDirection的屬性，它告訴哪個css文件應該加載LTR或RTL。

當我在Angular工作時，我們使用這種方法。

現在我的問題是，在Vue中有沒有替代上述方法的解決方法？我谷歌了一下，沒有找到任何解決辦法。

謝謝

要動態加載css文件，你可以這樣做

<template>
  <div>
    <button @click="appendFile">Click me to add css file</button>
  </div>
</template>

<script>
export default {
  methods : {
    appendFile(){
      let file = document.createElement('link');
      file.rel = 'stylesheet';
      file.href = 'myfile.css'
      document.head.appendChild(file)
    }
  }
}
</script>

注射a & ltlink & gt進入頁面在vue中也有效，一個替代方法是使用webpack的代碼拆分。

if (data.rtl) {
  import("./css/rtl.css")
} else {
  import("./css/ltr.css")
}

使用導入("")從資源加載靜態css，例如，如果您使用多個文件進行樣式設置:

在App.vue上:

<script setup>
import { useStore } from "vuex";
import { computed, watchEffect } from "@vue/runtime-core";

const store = useStore();
const theme = computed(() => store.state.theme);

watchEffect(() => {
  import(`./assets/css/themes/${theme.value}.css`);
});
<script/>

您可以使用:

import(path);
in lifecycle

并在數據中動態設置文件名，例如:

data(){
   return{
      filename: 'test1',
   }
}
created(){
import(`./assets/css/themes/${this.filename}.css`);
}