您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“怎么為舊vue項(xiàng)目添加vite支持”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么為舊vue項(xiàng)目添加vite支持”這篇文章吧。
接手公司的某個(gè)項(xiàng)目已經(jīng)兩年了,現(xiàn)在每次啟動(dòng)項(xiàng)目都接近1分鐘,hmr也要好幾秒的時(shí)間,but vite2發(fā)布之后就看到了曙光,但是一直沒(méi)有動(dòng)手進(jìn)行升級(jí),昨天終于忍不住了,升級(jí)之后幾秒鐘就完成了。
vite —— 一個(gè)由 vue 作者尤雨溪開(kāi)發(fā)的 web 開(kāi)發(fā)工具,它具有以下特點(diǎn):
快速的冷啟動(dòng)
即時(shí)的模塊熱更新
真正的按需編譯
注:只是升級(jí)了開(kāi)發(fā)環(huán)境,打包依舊是webpack(也試過(guò)打包也用vite,但是打包后發(fā)現(xiàn)iview的字體圖標(biāo)出現(xiàn)問(wèn)題了,初步驗(yàn)證是靜態(tài)資源的問(wèn)題,vite打包后的靜態(tài)資源默認(rèn)放到assets下,如果有解決的同學(xué)麻煩告知下解決方案)
vue add vit # 添加vite插件
插件安裝完成后會(huì)在package.json中的script添加:
{ "script": { "vite": "node ./bin/vite" } }
使用 pnpm 的同學(xué),如果項(xiàng)目根目錄下沒(méi)有 .npmrc 文件請(qǐng)自行添加并在文件內(nèi)加上 shamefully-hoist=true;否則安裝vite插件可能會(huì)失敗。
這個(gè)錯(cuò)誤是因?yàn)樵趘ue.config.js中的configureWebpack只能使用對(duì)象的配置方法(vue cli支持對(duì)象和函數(shù)兩種方式)
出現(xiàn)這個(gè)問(wèn)題的原因是:vite默認(rèn)配置中的extensions不包含.vue;解決方法:
1、在vue.config中加上extensions
// vue.config.js module.exports = { configureWebpack:{ resolve:{ extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"] } } }
2、所有vue組件在導(dǎo)入時(shí)加上.vue的后綴名。
vite默認(rèn)的啟動(dòng)端口是3000,所以需要在vue.config.js中的devServer中加上port:8080
// vue.config.js module.exports = { devServer:{ port: 8080 } }
代理失效的原因:在vuecli中的重寫(xiě)配置是pathRewrite,而在vite中是rewrite.
解決方法:
module.exports = { devServer: { port: 8080, proxy: { "/api/cost/": { target: "http://localhost:9331", changeOrigin: true, pathRewrite: { "^/api/cost/": "/", }, rewrite: path => path.replace(/^\/api\/cost\//, "/"), // 適配vite }, "/api/import/": { target: "http://localhost:9332", changeOrigin: true, pathRewrite: { "^/api/import/": "/", }, rewrite: path => path.replace(/^\/api\/import\//, "/"), // 適配vite }, "/api/": { target: "http://localhost:9333", ws: true, changeOrigin: true, pathRewrite: { "^/api/": "/", }, rewrite: path => path.replace(/^\/api\//, "/"), // 適配vite }, }, }, }
以上是“怎么為舊vue項(xiàng)目添加vite支持”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(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)容。