在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ iview <Table> <Page> webpack

iview <Table> <Page> webpack打包發(fā)布后樣式問題

上線前本地調(diào)試

clipboard.png

上線后(通過webpack打包)

clipboard.png

受影響的包括
<Table>中的表格高度, 表格內(nèi)字體大??;
<Page>中的翻頁(yè)箭頭的位置從居中變成的頂頭

引入iview.css的方式是在main.js 中加入的,工程是用vue-cli生成的,本地調(diào)試一切安好,上線使用打包后的文件產(chǎn)生上述問題,求大神幫助

import Vue from 'vue'
import iView from 'iview'
import App from './App'
import router from './router'
import store from './store'
import 'iview/dist/styles/iview.css'

Vue.config.productionTip = false
Vue.use(iView)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

通過chrome的network工具,線上線下所有的js、css、ttf文件都已經(jīng)加載,對(duì)比不出差別
但還是懷疑線上有字體沖突或者是集體加載不正確

3月7日更新
diff 了線上線下的css文件 ,除了cdn的域名以外沒有任何區(qū)別,可以看到文件名稱里面的hashcode是相同的
clipboard.png

3月7日再更新
發(fā)現(xiàn)與線上線下無關(guān),同樣的cdn地址的文件在不一樣的服務(wù)器環(huán)境下產(chǎn)生的效果都不一樣,求大神解惑

回答
編輯回答
使勁操

坑了兩天終于還是靠自己找到了問題的答案和vue、i-view、webpack打包都沒啥關(guān)系,實(shí)際問題出在了index.html這個(gè)入口文件上,在vue-cli的index.html里面第一行<!DOCTYPE html>就是問題的關(guān)鍵所在,有了這一行,html 會(huì)按照w3c標(biāo)準(zhǔn)模式 document.compatMode:CSS1Compat 來渲染,否則就會(huì)是噩夢(mèng)的開始,document.compatMode:BackCompat,怪異模式,瀏覽器使用自己的怪異模式解析渲染頁(yè)面,導(dǎo)致出現(xiàn)上文描述的問題。
為什么會(huì)出現(xiàn)上傳cdn發(fā)布后得到的效果與開發(fā)環(huán)境不一致,就是因?yàn)閟erver端在集成cdn的js時(shí)使用的index.html里面不包含<!DOCTYPE html>,從而導(dǎo)致了上述一系列問題。
從css作用域、編譯打包配置、cdn上傳腳本、cdn服務(wù)器、瀏覽器字體兼容一步一步查到這里,感慨平時(shí)最容易忽略的才是問題的關(guān)鍵~

2017年10月16日 15:33