在main.js中可以判断后加引入相应的css // 判断设备是移动端还是pc端 const deviceType = () => { return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); }; // 判断是否是移动端 if (deviceType()) { import("@/assets/css/mobile.css"); // 移动端样式文件 }else{ import("@/assets/css/index.css"); // pc端样式文件 } 在Vue中，你可以使用客户端检测来决定加载哪个CSS文件。这里有一个简单的方法来根据设备类型加载不同的CSS文件： 使用v-bind来根据条件切换标签的href属性。 使用window.matchMedia来检测设备类型。 <template> <div> <!-- 移动端样式 --> <link v-if="isMobile" rel="stylesheet" href="mobile.css"> <!-- PC端样式 --> <link v-else rel="stylesheet" href="pc.css"> </div> </template> <script> export default { data() { return { isMobile: this.checkIsMobile() }; }, methods: { checkIsMobile() { const mediaQuery = window.matchMedia("(max-width: 768px)"); if (mediaQuery.matches) { return true; } else { return false; } } } }; </script> 在Vue项目中判断移动端和PC端，可以通过多种方法实现。以下是几种常见的方法，以及如何使用这些方法来判断设备类型： 1. 使用navigator.userAgent字符串检测 这是最简单且常用的方法，通过检查浏览器的navigator.userAgent字符串来判断设备类型。 methods: { isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); return flag; } } 在组件的mounted钩子或任何需要判断设备类型的地方调用这个方法： mounted() { if (this.isMobile()) { console.log("移动端设备"); // 移动端逻辑 } else { console.log("PC端设备"); // PC端逻辑 } } 使用第三方库（如vue-device-detector） 为了更方便和准确地检测设备类型，可以使用第三方库，如vue-device-detector。 首先，安装vue-device-detector库： npm install vue-device-detector --save 然后，在Vue项目中引入并使用它： import Vue from 'vue'; import VueDeviceDetector from 'vue-device-detector'; Vue.use(VueDeviceDetector); 在组件中使用VueDeviceDetector提供的属性和方法来检测设备类型： export default { data() { return { device: this.$device, }; }, mounted() { if (this.device.isMobile()) { console.log("移动端设备"); // 移动端逻辑 } else { console.log("PC端设备"); // PC端逻辑 } }, }; 3. 使用媒体查询（window.matchMedia） 虽然这种方法不是直接检测设备类型，但它可以根据设备的视口宽度来判断是否是移动设备。这种方法更适用于响应式设计，而不是设备类型的判断。 mounted() { const isMobile = window.matchMedia("(max-width: 768px)").matches; if (isMobile) { console.log("可能是移动端设备"); // 移动端逻辑 } else { console.log("可能是PC端设备"); // PC端逻辑 } } 4. 在路由守卫中判断设备类型 如果需要根据设备类型重定向到不同的页面，可以在Vue Router的路由守卫中进行判断： router.beforeEach((to, from, next) => { if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {