vue-cli@2.x項(xiàng)目遷移日志

雖然 vue-cli@3 早就已經(jīng)巨普及了，新項(xiàng)目應(yīng)該已經(jīng)很少有人還有使用 vue-cli@2.x 。 但是對于一些稍微早些時候的 vue 項(xiàng)目，如果當(dāng)時沒有做一些優(yōu)化、配置，隨著 webpack vue 等包的升級，有一些配置已經(jīng)不一樣了，并且關(guān)于 vue-cli@2.x 項(xiàng)目的文檔、博客也越來越少，如果遇到問題也許也會有麻煩，因此就想著把當(dāng)前的 vue-cli@2.x 項(xiàng)目原地升級配置。

項(xiàng)目結(jié)構(gòu)

vue-cli@2.x 項(xiàng)目結(jié)構(gòu)，其中紅色圈出的部分是 2.x 版本才有的。

vue-cli@3.x 目錄結(jié)構(gòu)， 箭頭指出的兩個文件的作用幾乎完全替代上面的 build , config 文件夾中的文件，以及根目錄下的 postcss 和 babel 配置文件的作用。

遷移配置

新建 babel.config.js 文件， 內(nèi)容是

module.exports = { presets: [  '@vue/app' ]}

新建 vue.config.js 文件，內(nèi)容是:

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

需要注意的是，在 vue-cli@2.x 中我們設(shè)置的 assetsPublicPath 屬性，在 vue-cli@3 中已經(jīng)更名為 publicPath， 這個屬性可以簡單理解為打包出來的 js css img 文件在被 index.html 文件引入的時候添加的前綴。

直接將 static 文件夾更名為 public ,并且將根目錄中的 index.html 文件也拖進(jìn) public文件夾中。這里需要注意的是，原來我們放在 static 中的靜態(tài)資源，在代碼中引用的時候，路徑可能會寫為 /static/img/xxx.jpg， 移動到 public 文件夾中之后，需要刪除 static 前綴，直接引用 /img/xxx.jpg 即可。

直接將 static 文件夾中的資源全都拖進(jìn),新建 public 文件夾

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

// 修改執(zhí)行腳本"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 就不成功，但是也不是嚴(yán)格的版本號一致，具體沒研究過對應(yīng)關(guān)系，直接從 vue-cli@3 初始化項(xiàng)目中抄版本號即可 "dependencies": { ...  "vue": "^2.6.10",  "vue-router": "^2.3.1",  "vuex": "^2.3.1" }, // 這里的 7 個依賴都必須有，并且因?yàn)?webpack 功能被內(nèi)置到 @vue/cli-service 中去了，所以原來 devDependencies 中根打包相關(guān)的依賴包都可以刪除了。 "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",  ... }

刪除原來的依賴，重新安裝新的依賴

rm -rf node_modules && cnpm i

重新執(zhí)行試試 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.

是因?yàn)?vue 當(dāng)前被編譯的版本不對，造成這個影響主要是因?yàn)?webpack 的配置被修改引起的。 隨便依照能找到很多解決辦法，但是最好的辦法是按照 vue-cli@3

// 將 main.js 中 new Vue 的參數(shù)修改一下形式// vue-cli@2.xnew Vue({ el: '#app', router, components: { App }, template: '<App/>'})// 修改為 vue-cli@3 中默認(rèn)的形式new Vue({ router, render: h => h(App),}).$mount('#app')

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。