vue.js body的css不生效問題及解決
vue.js body的css不生效
因為style上有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樣式不影響到其他組件或本組件的子組件，也保護的本組件的樣式不受其他組件影響。
通過Vue-CLI添加Vuetifyjs CSS不生效
通過vue-cli創(chuàng)建的vue項目，yarn build后，用yarn serve運行沒有問題，但是用nginx提供服務(wù)，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模式引入雖然可以工作，但是找不到根本原因?qū)嵲谑撬恢X。
讀了一百遍vue-cli和vuetifyjs的官方文檔，逐行比較代碼，總算是找到癥結(jié)所在。原來通過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);注意：
- 導(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，打開瀏覽器測試，OK。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
用element的upload組件實現(xiàn)多圖片上傳和壓縮的示例代碼
這篇文章主要介紹了用element的upload組件實現(xiàn)多圖片上傳和壓縮的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
在使用Vue3時,有時頁面修改后會出現(xiàn)空白,這篇文章主要介紹了vue3切換路由時頁面空白問題解決辦法,文中介紹的步驟可以有效解決頁面空白問題,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了如何構(gòu)建 vue-ssr 項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
使用element-ui table expand展開行實現(xiàn)手風(fēng)琴效果
這篇文章主要介紹了使用element-ui table expand展開行實現(xiàn)手風(fēng)琴效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue項目完成后如何實現(xiàn)項目優(yōu)化的示例
本文主要介紹了vue項目完成后如何實現(xiàn)項目優(yōu)化的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹的是Vue子組件與父組件，什么是父組件，什么是子組件很多時候面對這個問題我們都會有所混淆，下面文章我們就來詳細介紹,需要的朋友可以參考一下2021-10-10
開發(fā)中經(jīng)常會使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關(guān)于如何在vite里獲取env環(huán)境變量的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
最近小編遇到這樣的需求，要實現(xiàn)一個新聞?wù)故卷摴δ?，剛接到這樣的需求還真是一頭霧水，不知從哪入手，今天小編通過實例代碼給大家介紹下vue實現(xiàn)新聞?wù)故卷摰牟襟E詳解，感興趣的朋友跟隨小編一起看看吧2019-04-04
這篇文章主要介紹了如何修改el-form-item 的label的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3使用TypeIt實現(xiàn)文字打字機效果的代碼示例
在現(xiàn)代網(wǎng)頁設(shè)計中,文字打字機效果是一種非常流行的動畫效果,能夠吸引用戶的注意力并提升用戶體驗,本文將介紹如何在 Vue 3 中使用 TypeIt 庫實現(xiàn)文字打字機效果,并分享一些實用的技巧和示例,需要的朋友可以參考下2025-01-01