欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2老項(xiàng)目vite升級(jí)改造過程記錄

 更新時(shí)間:2022年12月24日 08:17:47   作者:埃及  
目前vite主要默認(rèn)是支持給vue3使用的,并且如果使用官方的cli創(chuàng)建的項(xiàng)目一樣會(huì)默認(rèn)使用vue3去構(gòu)建項(xiàng)目,此時(shí)對(duì)于一些vue2的老項(xiàng)目就顯得不友好了,下面這篇文章主要給大家介紹了關(guān)于vue2老項(xiàng)目vite升級(jí)改造的相關(guān)資料,需要的朋友可以參考下

前言

Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗(yàn)。它主要由兩部分組成:

  • 一個(gè)開發(fā)服務(wù)器,它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能,如速度快到驚人的 模塊熱更新(HMR)。
  • 一套構(gòu)建指令,它使用 Rollup 打包你的代碼,并且它是預(yù)配置的,可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源。

Vite 意在提供開箱即用的配置,同時(shí)它的 插件 APIJavaScript API 帶來了高度的可擴(kuò)展性,并有完整的類型支持。

vite包含如下特點(diǎn):

  • 光速啟動(dòng)
  • 熱模塊替換
  • 按需編譯

本次在開發(fā)環(huán)境增加vite的啟動(dòng)方式,提升開發(fā)效率,在生產(chǎn)環(huán)境保持原有模式。

背景

本次改造的工程是公司內(nèi)一個(gè)很重要,迭代維護(hù)了3年的老項(xiàng)目,隨著項(xiàng)目代碼量的逐漸增加,項(xiàng)目啟動(dòng)速度的速度越來越慢,已經(jīng)嚴(yán)重影響了開發(fā)效率,啟動(dòng)時(shí)間接近2分鐘。

該項(xiàng)目由@vue/cli 搭建的webpack模版,之前做過一次webpack3->的一次升級(jí),現(xiàn)使用webpack4.x版本。

在搭建vite的過程中,理想狀況是業(yè)務(wù)代碼的0改動(dòng)。

改造過程

保留webpack的選項(xiàng)

由于vite使用ES6 Module方式組織代碼,index.html的導(dǎo)入方式不通,復(fù)制index.html->prod.html

并修改webpack HtmlWebpackPlugin插件的template(開發(fā)和生產(chǎn)配置會(huì)有不同,保留原有配置即可)

new HtmlWebpackPlugin({ template: 'prod.html', }),

vite引入和配置

安裝

npm i vite --save-dev

并在根目錄新建vite.config.js文件

import { defineConfig } from 'vite' 
import path from 'path' 
export default () => defineConfig({
      resolve: {
                extensions: ['.js', '.vue', '.json', '.less'],       
                alias: {
                              vue: 'vue/dist/vue.esm.js',            
                              '@': path.resolve(__dirname, 'src'),        
                       }
                },    
      server: {
                port: 8080, // vite默認(rèn)是3000端口,保留原有的端口號(hào)
                proxy: {
                              '/api': { 
                                               target: 'http://baidu.com/',                
                                               changeOrigin: true,                
                                               rewrite: path => path.replace(/^\/api/, '')           
                                        } 
                               }    
                  } 
          })

添加 packge.json 中 scripts 命令,并改變?cè)械膚ebpack命令

{  
  "scripts": { 
        "dev": "vite" , 
          "dev:w": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --profile"
       } 
    }

修改 index.html中的入口文件導(dǎo)入方式

配置完后我們就可以嘗試運(yùn)行vite了

命令行輸入npm run dev

運(yùn)行后,我們可以看到很多報(bào)錯(cuò),這么多錯(cuò)誤信息如果手動(dòng)修改的話,無疑是一項(xiàng)巨大的工程,而且這些改動(dòng)沒有任價(jià)值。針對(duì)vite 工程的改造,我們可以通過插件解決對(duì)應(yīng)問題。

vite-plugins引入

雖然 vite 發(fā)展很快,npm 上面也陸陸續(xù)續(xù)有vite的插件更新,但是總有一些沒有覆蓋到的場(chǎng)景,官方的核心插件如下,我們的項(xiàng)目使用的是vue2版本的,所以用的是vite-plugin-vue2插件。

// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [
    createVuePlugin({
        jsx: true,
    })
  ],
}

針對(duì)這個(gè)場(chǎng)景,使用的是自己寫了一個(gè)插件vite-plugin-vue2-jsx,將需要修改的處理,全部由插件來進(jìn)行轉(zhuǎn)化

使用 vite-plugin-vue2-jsx 替換 vite-plugin-vue2 ,自動(dòng)處理

// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2-jsx'

export default {
  plugins: [
    createVuePlugin({
        jsx: true,
    })
  ],
}

require報(bào)錯(cuò)問題 

這個(gè)問題vite是使用ESModule編譯的,不支持CommonJs的原因,所以我們就需要將CommonJs 轉(zhuǎn)換為ESModule。

項(xiàng)目中存在兩種情況:

  • 圖片require引用
<img class="logo" :src="require('./images/logo.png')"/>

 在npm上找了半天也沒找到我需要的插件,針對(duì)這個(gè)場(chǎng)景,索性自己寫了一個(gè)插件vite-plugin-image-require

// vite.config.js
import { imageRequirePlugin } from 'vite-plugin-image-require'

export default {
  plugins: [
    imageRequirePlugin()
  ],
}

 2. 枚舉的引用

通過引入 vite-plugin-require-transform 插件來處理

npm i vite-plugin-require-transform --save-dev

配置

import requireTransform from 'vite-plugin-require-transform';

export default defineConfig({
  plugins: [
    requireTransform({fileRegex:/.js$|.vue$/}),
  ],
});

轉(zhuǎn)換 @import ~ 別名

resolve: {
    alias: {
      '~': path.join(__dirname, 'node_modules'),
    }
  },

webpack的 process.env 的環(huán)境變量在項(xiàng)目中的使用導(dǎo)致的頁面報(bào)錯(cuò),無法加載

define: {
    'process.env': process.env
},

完整配置

import { defineConfig } from 'vite'
import { imageRequirePlugin } from 'vite-plugin-image-require'
import { createVuePlugin } from 'vite-plugin-vue2-jsx'
import requireTransform from 'vite-plugin-require-transform';
import path from 'path'

export default () => defineConfig({
    define: {
        'process.env': process.env
    },
    plugins: [
        createVuePlugin({
            jsx: true,
        }),
        requireTransform({
            fileRegex:/.js$|.vue$/
        }),
        imageRequirePlugin(),
    ],
    resolve: {
        extensions: ['.js', '.vue', '.json', '.less'],
        alias: {
            vue: 'vue/dist/vue.esm.js',
            '@': path.resolve(__dirname, 'src'),
            '~': path.join(__dirname, 'node_modules'),
        }
    },
    server: {
        port: 8080, // vite默認(rèn)是3000端口,保留原有的端口號(hào)
        proxy: {
            '/api': {
                target: 'http://baidu.com/',
                changeOrigin: true,
                rewrite: path => path.replace(/^/api/, '')
            }
        }
    }
})

結(jié)束

# 使用vite啟動(dòng)服務(wù)
npm run dev

# 使用webpack啟動(dòng)服務(wù)
npm run dev:w

總結(jié)

到此這篇關(guān)于vue2老項(xiàng)目vite升級(jí)改造的文章就介紹到這了,更多相關(guān)vue2老項(xiàng)目vite升級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue組件文檔生成工具庫(kù)的方法

    Vue組件文檔生成工具庫(kù)的方法

    本文主要介紹了Vue組件文檔生成工具庫(kù)的方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue返回上一頁面時(shí)回到原先滾動(dòng)的位置的方法

    vue返回上一頁面時(shí)回到原先滾動(dòng)的位置的方法

    這篇文章主要介紹了vue返回上一頁面時(shí)回到原先滾動(dòng)的位置的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • vscode中eslint配置保存自動(dòng)修復(fù)代碼示例詳解

    vscode中eslint配置保存自動(dòng)修復(fù)代碼示例詳解

    vscode根據(jù)eslint保存?動(dòng)修復(fù)配置,下面這篇文章主要給大家介紹了關(guān)于vscode中eslint配置保存自動(dòng)修復(fù)代碼的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • vue改變數(shù)據(jù)后數(shù)據(jù)變化頁面不刷新的解決方法

    vue改變數(shù)據(jù)后數(shù)據(jù)變化頁面不刷新的解決方法

    這篇文章主要給大家介紹了關(guān)于vue改變數(shù)據(jù)后數(shù)據(jù)變化頁面不刷新的解決方法,vue比較常見的坑就是數(shù)據(jù)(后臺(tái)返回)更新了,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • uniapp引入模塊化js文件和非模塊化js文件的四種方式

    uniapp引入模塊化js文件和非模塊化js文件的四種方式

    這篇文章主要介紹了uniapp引入模塊化js文件和非模塊化js文件的四種方式,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-11-11
  • vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例

    vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例

    本篇文章主要介紹了vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-05-05
  • elementUI彈窗里的表單重置不生效問題解決

    elementUI彈窗里的表單重置不生效問題解決

    本文主要介紹了elementUI彈窗里的表單重置不生效問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • Vue3狀態(tài)管理的使用詳解

    Vue3狀態(tài)管理的使用詳解

    這篇文章主要介紹了Vue3狀態(tài)管理的使用詳解,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
    2021-04-04
  • Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法

    Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法

    最近在做項(xiàng)目時(shí),需要進(jìn)行兩個(gè)組件聯(lián)動(dòng),一個(gè)輪詢獲取到消息,然后將其傳遞給另外一個(gè)組件進(jìn)行橫向滾動(dòng)展示,結(jié)果滾動(dòng)的速度越來越快。接下來通過本文給大家分享Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法,感興趣的朋友一起看看吧
    2019-08-08
  • vue-router vuex-oidc動(dòng)態(tài)路由實(shí)例及功能詳解

    vue-router vuex-oidc動(dòng)態(tài)路由實(shí)例及功能詳解

    這篇文章主要為大家介紹了vue-router vuex-oidc動(dòng)態(tài)路由實(shí)例及功能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11

最新評(píng)論