vue.config.js報錯cannot set property "preserveWhitespace" of undefined

最近在項目中配置webpack，由於vue-cli4需要在vue.config.js文件中完成相關配置，於是本着不造輪子的原則，直接去網上cv大法，但是在實際中卻發現了一些問題，在項目啟動的時候報錯cannot set property "preserveWhitespace" of undefined

module.exports = {
    lintOnSave:false,
    chainWebpack: (config) =>{
        config.module
          .rule('vue')
          .test( /\.vue$/)
          .use('vue-loader')
          .tap((options) =>{
            options.compilerOptions.preserveWhitespace = true
            }
          )
    }
}

把options選項打印出來，發現其實並沒有complierOptions這個選項的：

由於我這里配置的vue-loader，在網上沖浪了一個下午之后，發現並不能解決甚至有的人也出現過這樣的錯誤，於是我把問題的解決方法指向文檔，在vue-loader的文檔中看到了compilerOptions這個選項:

好家伙，我直接好家伙，原來這個選項默認就是空的，所以我們是不能直接在下面添加的，於是把代碼改造了一下：

const addOptions = {
  preserveWhitespace: true
}
module.exports = {
    lintOnSave:false,
    chainWebpack: (config) =>{
        config.module
          .rule('vue')
          .test( /\.vue$/)
          .use('vue-loader')
          .tap((options) =>{
            options.compilerOptions = addOptions
            console.log(options)
            }
          )
    }
}

我們打印一下options選項看下是否添加上去了:

我們可以看到選項加了上去，並且項目正常啟動了。如果遇到類似問題，可能這個選項本來就是空的，並不能直接去添加。