今天是周六.

我過來加班了.

是因為一個屬性問題.

俗話說一杯茶一包煙一個bug改一天

感覺這句話就是特意為我準備的(我加班的時候喝奶茶,抽煙,而且就一個bug.哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或)

言歸正傳,說下webpack打包問題,剛到新工作和大佬們一起做ts + vue + vant的項目.(我之前不寫ts,其實差不多,就是命名語法等問題)
我們一起擼代碼,一直是在本地run serve的本地是一直沒問題的,但是準備轉測的時候,打包發現了問題(建議大家以後,定期打包一下代碼,不然問題集中到最後是很坑的.)

問題:打包之後vant的樣式一直沒有按需加載(我們這個項目使用是按需引入vant這種方式來使用的.)

就是因為在vue.config.js中配置文件沒有加上這個 parallel: false, .導致打包一直有問題.雖然不是很明白原理(網上看了資料也不是很清楚,好像是允許並行webpack項目,提高打包速度的插件...)

代碼:

parallel: false,

如上圖 加上這個屬性打包之後樣式就會按需加載vant的css文件了.

以後應該沒有人會遇到這個問題吧.畢竟我在網上搜了幾天的資料都沒看到過這類的問題,我就記錄下來提醒自己吧,over!

em....順便說下vant的按需引入和全局引入吧

全局引入:(在main.js中導入就好了/用ts的童鞋就是main.ts文件)

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

別忘了Vue.use(Vant) 哦!

按需引入(看大家都是推薦使用的,我也推薦一下這種方法吧.)

// 1.安裝npm install babel-plugin-import -D
// 2.在babelrc中配置
   "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import", [
      {
        "libraryName":"vant",
        "style":true
      }
      ]
    ]
  ]     

import { Button } from 'vant'

Vue.use(Button) //或者下面的
 @Component({
        components: {
            [Button.name]: Button,
            //下面這些送你們的
            [Icon.name]: Icon,
            [NavBar.name]: NavBar,
            [Actionsheet.name]: Actionsheet,
            [SubmitBar.name]: SubmitBar,
            [Cell.name]: Cell,
            [Search.name]: 
            [CellGroup.name]: CellGroup,
            [SwipeCell.name]: SwipeCell,
            [Stepper.name]: Stepper,
            [List.name]: List,
        }
    })
 

記一次webpack打包樣式加載問題