vue-cli@2.x項目遷移日誌

vue-cli@2.x項目遷移日誌

雖然 vue-cli@3 早就已經巨普及了，新項目應該已經不多有人還有使用 vue-cli@2.x 。 可是對於一些稍微早些時候的 vue 項目，若是當時沒有作一些優化、配置，隨着 webpack vue 等包的升級，有一些配置已經不同了，而且關於 vue-cli@2.x 項目的文檔、博客也愈來愈少，若是遇到問題也許也會有麻煩，所以就想着把當前的 vue-cli@2.x 項目原地升級配置。

項目結構

vue-cli@2.x 項目結構，其中紅色圈出的部分是 2.x 版本纔有的。

vue-cli@3.x 目錄結構， 箭頭指出的兩個文件的做用幾乎徹底替代上面的 build , config 文件夾中的文件，以及根目錄下的 postcss 和 babel 配置文件的做用。

遷移配置

1. 新建 babel.config.js 文件， 內容是

   module.exports = {
     presets: [
       '@vue/app'
     ]
   }
   複製代碼

2. 新建 vue.config.js 文件，內容是:

   const isProduct = process.env.NODE_ENV === 'production';
   
   module.exports = {
     publicPath: isProduct ? 'xxx' : ''
   };
   複製代碼

   須要注意的是，在 vue-cli@2.x 中咱們設置的 assetsPublicPath 屬性，在 vue-cli@3 中已經改名爲 publicPath， 這個屬性能夠簡單理解爲打包出來的 js css img 文件在被 index.html 文件引入的時候添加的前綴。

3. 直接將 static 文件夾改名爲 public ,而且將根目錄中的 index.html 文件也拖進 public文件夾中。這裏須要注意的是，原來咱們放在 static 中的靜態資源，在代碼中引用的時候，路徑可能會寫爲 /static/img/xxx.jpg， 移動到 public 文件夾中以後，須要刪除 static 前綴，直接引用 /img/xxx.jpg 便可。

4. 直接將 static 文件夾中的資源全都拖進,新建 public 文件夾

5. 接下來改動比較多的就是 package.json中的依賴包了

   // 修改執行腳本
   "start": "npm run serve",
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint",
   複製代碼

   // 須要手動更新一下 vue 和 vue-template-compiler 的版本，若是版本沒有對象 npm start 就不成功，可是也不是嚴格的版本號一致，具體沒研究過對應關係，直接從 vue-cli@3 初始化項目中抄版本號便可
     "dependencies": {
   		...
       "vue": "^2.6.10",
       "vue-router": "^2.3.1",
       "vuex": "^2.3.1"
     },
     // 這裏的 7 個依賴都必須有，而且由於 webpack 功能被內置到 @vue/cli-service 中去了，因此原來 devDependencies 中根打包相關的依賴包均可以刪除了。
     "devDependencies": {
       "@vue/cli-plugin-babel": "^3.7.0",
       "@vue/cli-plugin-eslint": "^3.7.0",
       "@vue/cli-service": "^3.7.0",
       "babel-eslint": "^10.0.1",
       "eslint": "^5.16.0",
       "eslint-plugin-vue": "^5.0.0",
       "vue-template-compiler": "^2.5.21",
       ...
     }
   複製代碼

   

6. 刪除原來的依賴，從新安裝新的依賴

   rm -rf node_modules && cnpm i
   複製代碼

7. 從新執行試試 npm start

   此時極可能會遇到一個問題：

   [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
   複製代碼

   是由於 vue 當前被編譯的版本不對，形成這個影響主要是由於 webpack 的配置被修改引發的。 隨便依照能找到不少解決辦法，可是最好的辦法是按照 vue-cli@3

   // 將 main.js 中 new Vue 的參數修改一下形式
   
   // vue-cli@2.x
   new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>'
   })
   
   // 修改成 vue-cli@3 中默認的形式
   new Vue({
     router,
     render: h => h(App),
   }).$mount('#app')
   複製代碼