Vue-Cli 3.0 + vue.config.js

     雖然一直沒有親手搭建過vue項目，但是2.0的時候就開始自學（但並沒有實踐項目）。然后公司最近有個人用3.0做了個項目，公司讓我參與進去，我就順便學習了一把3.0。（美滋滋）

    因為電腦的環境還是之前自學時候的2.0，因此現在需要先升級到3.0。下面是具體步驟：

    1. npm uninstall -g vue-cli

    2. npm install -g @vue/cli

    3. vue create [new-dir]    //進去后會有一些選擇讓你做，我選的default，然后下載用選npm

    4. cd [new-dir] 

    4. npm run serve 

    至此3.0版本的項目就初始化好。可以看到目錄結構真的是非常的精簡。我參考同事已經做好的項目，是多了幾個文件，分別是：

      1.  vue.config.js

      2. .env & .env.development & .env.[其他環境]

 

   下面就講下vue.config.js  (一個配置文件，替代了2.0的webpack.config.js)

  官方說vue.config.js是一個可配的文件，如果存在（與package.json同級）,會被@vue/cli-service自動加載

  功能：完成關於端口號的配置，打包之后的路徑配置，圖片的配置等。

  i:chainWebpack

    允許對內部webpack配置做更細粒度的修改，比如修改、增加loader（鏈式操作）

chainWebpack:config=>{
   config.module.rule('xx').tap( () => {return {key:val,key:val}} )   //修改loader選項
   config.module.rule('xx').end()    //添加一個新的loader
   config.plugin('xx').tap( args => { ...; return args} )    //修改插件選項
}

ii:configureWebpack

     調整webpack配置（development(開發)/production(生產)）

     如果需要基於環境有條件的配置，或者想直接修改配置，就可以返回一個函數，參數會收到已解析好的而配置，在函數內可直接改配置

 configureWebpack: config => {

if (process.env.NODE_ENV === 'production') {
           //xxxxx
        }else if(process.env.NODE_ENV==='development'){
           //xxxx
        }
    },

 iii:css

   css的處理

css: {
        loaderOptions: {   //向css相關的loader傳遞選項 設置后每個sass文件都會預加載這兩個文件
            sass: {
                data: `@import "@/env/${process.env.VUE_APP_PROJECT_ENV}/css/_variables.scss"; 
                       @import "@/css/_variables.scss";`   
            }
        }
    }

 //聲明變量具體的值（主題文件夾下的css文件夾）

$variable-color-theme: #ff8c05;
$variable-color-theme-deeper: #ff7505;
$variable-color-theme-disabled: #f7d5b1;

//主題色是變量（外層css文件夾）

$color-theme: $variable-color-theme;
$color-theme-deeper: $variable-color-theme-deeper;
$color-theme-disabled: $variable-color-theme-disabled;

iv: productionSourceMap:false

   如果設置成false，項目在打包后是會壓縮加密的，運行速度會加快，但是運行時報錯是無法得知

   如果設置成ftrue, 項目會加載全部源碼，則會具體顯示運行時的報錯，運行速度會變慢，而且暴露了源碼

  v: vue-loader+transformAssetUrls

    vue-loader: 解析和轉換.vue文件，提取出其中的邏輯代碼js/css/html，再分別把他們交給對應的loader去處理

    transformAssetUrls: 模板編譯中，編譯器將某些資源的某些屬性轉成可被調用（etc: img的src屬性），使得這些資源可以被webpack處理

 chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(() => {
                return {
                    transformAssetUrls: {
                        video: ['src', 'poster'],
                        source: 'src',
                        img: 'src',
                        image: 'xlink:href'
                    }
                }
            })
    }

   vi：聲明新的路徑變量 @env

   以下@env代表的路徑變量為src/env下的，如果是esim環境，就在/esim目錄里，如果是wesim環境，就在/wesim目錄里

   用於：在不同環境下，可能同一位置上引入的組件內容不一樣，用於導入這些組件的時候，聲明路徑

configureWebpack: config => {
        Object.assign(config.resolve.alias, {'@env': path.resolve(`src/env/${process.env.VUE_APP_PROJECT_ENV}`)})
     
    } 

 vii：filemanager-webpack-plugin

      用於：在build之前及之后復制、打包、移動、刪除文件以及文件夾

const FileManagerPlugin = require('filemanager-webpack-plugin')
 configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.plugins.push(new FileManagerPlugin({
                onEnd: {
                    archive: [
                        {
                            source: './dist',
                            destination: `./dist/${process.env.VUE_APP_DOMAIN}-${packageInfo.version}.tar`,
                            format: 'tar',
                        }
                    ]
                }
            }))
        }
    },