您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue-cli@2.x項(xiàng)目遷移日志的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
vue-cli@2.x項(xiàng)目遷移日志
雖然 vue-cli@3 早就已經(jīng)巨普及了,新項(xiàng)目應(yīng)該已經(jīng)很少有人還有使用 vue-cli@2.x 。 但是對(duì)于一些稍微早些時(shí)候的 vue 項(xiàng)目,如果當(dāng)時(shí)沒(méi)有做一些優(yōu)化、配置,隨著 webpack vue 等包的升級(jí),有一些配置已經(jīng)不一樣了,并且關(guān)于 vue-cli@2.x 項(xiàng)目的文檔、博客也越來(lái)越少,如果遇到問(wèn)題也許也會(huì)有麻煩,因此就想著把當(dāng)前的 vue-cli@2.x 項(xiàng)目原地升級(jí)配置。
項(xiàng)目結(jié)構(gòu)
vue-cli@2.x 項(xiàng)目結(jié)構(gòu),其中紅色圈出的部分是 2.x 版本才有的。
vue-cli@3.x 目錄結(jié)構(gòu), 箭頭指出的兩個(gè)文件的作用幾乎完全替代上面的 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 中我們?cè)O(shè)置的 assetsPublicPath 屬性,在 vue-cli@3 中已經(jīng)更名為 publicPath, 這個(gè)屬性可以簡(jiǎn)單理解為打包出來(lái)的 js css img 文件在被 index.html 文件引入的時(shí)候添加的前綴。
直接將 static 文件夾更名為 public ,并且將根目錄中的 index.html 文件也拖進(jìn) public文件夾中。這里需要注意的是,原來(lái)我們放在 static 中的靜態(tài)資源,在代碼中引用的時(shí)候,路徑可能會(huì)寫(xiě)為 /static/img/xxx.jpg, 移動(dòng)到 public 文件夾中之后,需要?jiǎng)h除 static 前綴,直接引用 /img/xxx.jpg 即可。
直接將 static 文件夾中的資源全都拖進(jìn),新建 public 文件夾
接下來(lái)改動(dòng)比較多的就是 package.json中的依賴包了
// 修改執(zhí)行腳本 "start": "npm run serve", "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint",
// 需要手動(dòng)更新一下 vue 和 vue-template-compiler 的版本,如果版本沒(méi)有對(duì)象 npm start 就不成功,但是也不是嚴(yán)格的版本號(hào)一致,具體沒(méi)研究過(guò)對(duì)應(yīng)關(guān)系,直接從 vue-cli@3 初始化項(xiàng)目中抄版本號(hào)即可 "dependencies": { ... "vue": "^2.6.10", "vue-router": "^2.3.1", "vuex": "^2.3.1" }, // 這里的 7 個(gè)依賴都必須有,并且因?yàn)?nbsp;webpack 功能被內(nèi)置到 @vue/cli-service 中去了,所以原來(lái) 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", ... }
刪除原來(lái)的依賴,重新安裝新的依賴
rm -rf node_modules && cnpm i
重新執(zhí)行試試 npm start
此時(shí)很可能會(huì)遇到一個(gè)問(wèn)題:
[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)前被編譯的版本不對(duì),造成這個(gè)影響主要是因?yàn)?webpack 的配置被修改引起的。 隨便依照能找到很多解決辦法,但是最好的辦法是按照 vue-cli@3
// 將 main.js 中 new Vue 的參數(shù)修改一下形式 // vue-cli@2.x new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) // 修改為 vue-cli@3 中默認(rèn)的形式 new Vue({ router, render: h => h(App), }).$mount('#app')
感謝各位的閱讀!關(guān)于“vue-cli@2.x項(xiàng)目遷移日志的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。