vue.js body的css不生效问题及解决

更新时间：2023年06月05日 09:24:09 作者：甜心小宇yu丶

这篇文章主要介绍了vue.js body的css不生效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue.js body的css不生效

因为style上有scoped标签，去掉即可。

<style> /* 此处如果有scoped 则body的css内容不生效*/
  body{
    margin:0px;
    padding:0px;
    font-family: "微软雅黑";
    font-size: 16px;
  }
</style>

vue中的scoped属性

在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的组件，使得该css样式不影响到其他组件或本组件的子组件，也保护的本组件的样式不受其他组件影响。

通过Vue-CLI添加Vuetifyjs CSS不生效

通过vue-cli创建的vue项目，yarn build后，用yarn serve运行没有问题，但是用nginx提供服务，vuetify的css死活无法加载！

Nginx配置

worker_processes 1;
events {
    worker_connections 10240;
}
http {
    include /usr/local/etc/nginx/mime.types;
    default_type application/octet-stream;
    server {
        listen 80;
        server_name localhost;
        location / {
            alias ~/Workspace/peds/portal/dist/;
            index index.html;
        }
        location /api {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass http://localhost:3000;
        }
    }
}

直接修改public目录下index.html，以CDN模式引入虽然可以工作，但是找不到根本原因实在是睡不着觉。

读了一百遍vue-cli和vuetifyjs的官方文档，逐行比较代码，总算是找到症结所在。原来通过vue-cli的vue add vuetify添加的/src/plugins/vuetify.js有问题！

fix方案如下：

修改src/plugins/目录vuetify.js如下：

import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
const opts = {};
export default new Vuetify(opts);

注意：

导入vuetify.min.css
要导入vuetify/lib（不是vuetify/lib/framework!）

修改src目录main.js如下

// src/main.js
import Vue from 'vue'
import vuetify from './plugins/vuetify' // path to vuetify export
new Vue({
  vuetify,
}).$mount('#app')

参考https://vuetifyjs.com/en/getting-started/installation/#webpack-install的vuetify-loader方案修改。

重新yarn build，然后nginx -s reload，打开浏览器测试，OK。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue实现图片预览效果实例（放大、缩小、拖拽）
现在项目中有这样的一个需求,对上传的图片可以点击之后在线预览,这篇文章主要给大家介绍了关于Vue实现图片预览效果实例（放大、缩小、拖拽）的相关资料,需要的朋友可以参考下
2021-05-05
vue实现树状表格效果
这篇文章主要为大家详细介绍了vue实现树状表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
如何在Vue3中创建动态主题切换功能
在Vue3中实现动态主题切换功能,通过明亮和暗色主题的选择,提供个性化使用体验,使用setup语法糖优化代码,通过创建组件和响应式变量来进行主题切换,并动态加载CSS文件
2024-09-09
vuex实现的简单购物车功能示例
这篇文章主要介绍了vuex实现的简单购物车功能,结合实例形式分析了vuex购物车组件相关商品列表、购物车创建、添加、删除、清空等相关操作技巧,需要的朋友可以参考下
2019-02-02
vue+vue-meta-info动态设置meta标签教程
这篇文章主要介绍了vue+vue-meta-info动态设置meta标签教程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue组件之间的通信方式详细讲解
对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结
2022-08-08
跟混乱的页面弹窗说再见
这篇文章主要介绍了跟混乱的页面弹窗说再见，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
解决vue scoped html样式无效的问题
这篇文章主要介绍了解决vue scoped html样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
详解vue 模版组件的三种用法
本篇文章主要介绍了详解vue 模版组件的三种用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
详解用vue编写弹出框组件
本篇文章主要介绍了详解用vue编写弹出框组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07