The problem of body's css not taking effect and its solution

The css of the body does not take effect

Because there is a scoped tag on the style, just remove it.

<style> /* If there is scoped here, the css content of the body will not take effect*/
  body{
    margin:0px;
    padding:0px;
    font-family: "Microsoft Yahei";
    font-size: 16px;
  }
</style>

scoped property in vue

In the vue component, add scoped attribute on the style tag to indicate that its style acts on the current component, so that the css style does not affect other components or subcomponents of this component, and also protects the style of this component from being affected by other components.

Adding Vuetifyjs CSS through Vue-CLI does not take effect

After yarn build, there is no problem running with yarn serve, but when using nginx to provide services, vuetify's css cannot be loaded!

Nginx configuration

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

It is possible to directly modify the public directory and introduce it in CDN mode, but the root cause is not found, so I can't sleep.

I read the official documents of vue-cli and vuetifyjs a hundred times, compared the code line by line, and finally found the crux of the problem. It turns out that there is a problem with /src/plugins/ added through vue-cli's vue add vuetify!

The fix scheme is as follows:

Modify the src/plugins/ directory as follows:

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

Notice:

• Import
• To import vuetify/lib (not vuetify/lib/framework!)

Modify the src directory as follows

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

refer to/en/getting-started/installation/#webpack-installThe vuetify-loader scheme is modified.

Reyarn build, then nginx -s reload, open browser test, OK.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.