又有一段時間沒寫過部落格了。

上家公司做了一個多月，沒學到什麼東西。跳槽了之後，因為自研專案原本是做的多頁vue專案，每次都要單獨引進，所以從鍛鍊經驗以及完成任務的角度開始了重構。

之前用的是vue-cli2.x的版本，現在使用vue-cli3.0進行搭建。

專案結構安裝什麼的都不想說，只記錄有問題的部分。

1.vue.config.js

3.0沒有了相關的config.js，所以需要自己在根目錄下面新建一個配置檔案進行操作。

1）baseUrl

   這個還是老問題，2.x的時候就遇到過打包之後的版本載入資源的路徑不對，和原來在dev的配置檔案下一樣，如下設定

   baseUrl: './',

2）跨域

   跨域也是和原來一樣，只不過換了寫的地方

devServer: {

proxy: {

'/v2': {

target: 'http://localhost:8888/',

changeOrigin: true,

pathRewrite: {

'^/v2': ''

                    }

               }

         }

}

2.區分生產環境和測試環境和本地環境的問題。

1）本地環境

    前端們本地開發一般會遇到請求後端介面跨域的問題，我們公司後端寫法有問題，沒做統一介面名稱管理，所以自己在前端加了個類似v2的字首進行介面判斷，然後使用vue的server處理跨域。

    那麼本地環境就要將地址改為xxxx:xx/v2的形式，所以在根目錄下新建.env.local的配置檔案，

內部內容為，此處腳手架文件都有介紹。

    NODE_ENV='local'
    VUE_APP_URL='v2'

在編譯的時候只要把serve改為"serve": "vue-cli-service serve --mode local",即可

2）生產環境和測試環境

   我們公司的區別也就在於地址不同，也是隻做了url的切換。"prod": "vue-cli-service build --mode production",

 內部內容一般來說要為了區分可以加上

  outputDir = 'prod'或者outputDir = 'devtest'

然後再config.js中將打包輸出目錄更改

outputDir:process.env.outputDir就可以了。

3.element-ui的引入的問題等

這塊引入和原來的Import不太一樣，拆出來了plugins資料夾放工具js。

還有一些問題下次再更新。