環境:vue-cli 2.x版本
自己在官網配置了主題並放到了項目中https://element.eleme.cn/#/zh-CN/theme
然后,我的腳手架在我的電腦中休息了幾天,就跑不通了呢!
可以看到報錯:
: config.dev.cssSourceMap
^
TypeError: Cannot read property 'cssSourceMap' of undefined
原因:
我在項目下放了一個config.json文件,他是element-ui的自定義主題配置文件。
仔細觀察我的報錯:
在項目build目錄下的vue-loader.conf.js文件中,config.dev是undefined,所以才會報錯說“不能讀undefined的屬性”。因為undefined類型是沒有屬性的,這點是js的基礎知識。
好,那就說明config變量(可能是個對象)他沒有dev屬性。
於是我去這個文件夾下打印config變量:
他原本引得路徑是本文件上一級目錄的config。
可能因為require這個node語法的特點,雖然我還沒學到,但是我猜測require里邊的路徑,如果不寫后綴名,會自動補全后綴名,
也就是說如果有同名文件就會被引入。如果沒有同名文件,他就引入同名文件夾下的index.js
但是我現在在build上一級中(根目錄下)放了config.json。他優先引入了config.json文件。
打印結果證實了我的猜測:下邊的對象就是config.json里邊的代碼
解決
於是我把require里邊的引入路徑修改一下,把config的路徑添加為“.../config/index”:
再打印,這里就沒問題了,內容就是config文件夾中的index.js的內容:
但是又來了新問題,換了新的頁面webpack.base.conf.js:19
path: config.build.assetsRoot,
^
TypeError: Cannot read property 'assetsRoot' of undefined
看來這個里邊也是引入的路徑的問題。去對應文件的對應行19行尋找問題位置:
果然這里也是因為config.json文件的加入,導致config引入進來的不對了:
修改這里的路徑,順便把webpack的其他配置文件中config/index.js的引入也修改一下:
以下三個文件中都有同樣的問題:
還有utils里邊也用到了。也得改。
綜上,一下五個文件中,關於config文件中index.js的引入路徑都需要改一下就可以正常跑起來了。
為了看到這兩行,真不容易啊!