vue.js body的css不生效問(wèn)題及解決
vue.js body的css不生效
因?yàn)閟tyle上有scoped標(biāo)簽，去掉即可。
<style> /* 此處如果有scoped 則body的css內(nèi)容不生效*/
? body{
? ? margin:0px;
? ? padding:0px;
? ? font-family: "微軟雅黑";
? ? font-size: 16px;
? }
</style>vue中的scoped屬性
在vue組件中，在style標(biāo)簽上添加scoped屬性，以表示它的樣式作用于當(dāng)下的組件，使得該css樣式不影響到其他組件或本組件的子組件，也保護(hù)的本組件的樣式不受其他組件影響。
通過(guò)Vue-CLI添加Vuetifyjs CSS不生效
通過(guò)vue-cli創(chuàng)建的vue項(xiàng)目，yarn build后，用yarn serve運(yùn)行沒(méi)有問(wèn)題，但是用nginx提供服務(wù)，vuetify的css死活無(wú)法加載！
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模式引入雖然可以工作，但是找不到根本原因?qū)嵲谑撬恢X(jué)。
讀了一百遍vue-cli和vuetifyjs的官方文檔，逐行比較代碼，總算是找到癥結(jié)所在。原來(lái)通過(guò)vue-cli的vue add vuetify添加的/src/plugins/vuetify.js有問(wèn)題！
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);注意：
- 導(dǎo)入vuetify.min.css
- 要導(dǎo)入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，打開(kāi)瀏覽器測(cè)試，OK。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue通過(guò)v-show實(shí)現(xiàn)回到頂部top效果
這篇文章主要介紹了vue通過(guò)v-show實(shí)現(xiàn)回到頂部top效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
vue設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件詳解
這篇文章主要介紹了vue設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
window.onresize在vue中只能使用一次,自適應(yīng)resize報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了window.onresize在vue中只能使用一次,自適應(yīng)resize報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程
這篇文章主要為大家介紹了vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue項(xiàng)目線上更新無(wú)需強(qiáng)制刷新的幾種實(shí)現(xiàn)方案(無(wú)感更新)
在 Vue 項(xiàng)目中,當(dāng)發(fā)布新版本后,用戶可能因?yàn)闉g覽器緩存而繼續(xù)使用舊版本,所以本文給大家介紹了Vue 項(xiàng)目線上更新無(wú)需強(qiáng)制刷新的幾種實(shí)現(xiàn)方案,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-03-03
vue3+uniapp中使用高德地圖實(shí)現(xiàn)撒點(diǎn)效果(操作步驟)
這篇文章主要介紹了vue3+uniapp中使用高德地圖實(shí)現(xiàn)撒點(diǎn)效果(操作步驟),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-05-05
Vue3 Composition API的使用簡(jiǎn)介
這篇文章主要介紹了Vue3 Composition API的使用簡(jiǎn)介，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-03-03
淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實(shí)例,為undefined
這篇文章主要介紹了淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實(shí)例,為undefined，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
React/vue開(kāi)發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開(kāi)發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
本次小編通過(guò)一個(gè)簡(jiǎn)單的實(shí)例來(lái)教給大家如何寫一個(gè)vue插件，以及需要注意的地方，如果有需要的讀者跟著學(xué)習(xí)一下吧。2017-11-11