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

vue2老項目vite升級改造過程記錄

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

前言

Vite是一種新型前端構建工具，能夠顯著提升前端開發(fā)體驗。它主要由兩部分組成：

Vite 意在提供開箱即用的配置，同時它的 插件 API 和 JavaScript API 帶來了高度的可擴展性，并有完整的類型支持。

vite包含如下特點：

  • 光速啟動
  • 熱模塊替換
  • 按需編譯

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

背景

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

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

在搭建vite的過程中，理想狀況是業(yè)務代碼的0改動。

改造過程

保留webpack的選項

由于vite使用ES6 Module方式組織代碼,index.html的導入方式不通，復制index.html->prod.html

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

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默認是3000端口，保留原有的端口號
                proxy: {
                              '/api': { 
                                               target: 'http://baidu.com/',                
                                               changeOrigin: true,                
                                               rewrite: path => path.replace(/^\/api/, '')           
                                        } 
                               }    
                  } 
          })

添加 packge.json 中 scripts 命令，并改變原有的webpack命令

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

修改 index.html中的入口文件導入方式

配置完后我們就可以嘗試運行vite了

命令行輸入npm run dev

運行后，我們可以看到很多報錯，這么多錯誤信息如果手動修改的話，無疑是一項巨大的工程，而且這些改動沒有任價值。針對vite 工程的改造，我們可以通過插件解決對應問題。

vite-plugins引入

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

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

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

針對這個場景，使用的是自己寫了一個插件vite-plugin-vue2-jsx，將需要修改的處理，全部由插件來進行轉化

使用 vite-plugin-vue2-jsx 替換 vite-plugin-vue2 ，自動處理

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

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

require報錯問題 

這個問題vite是使用ESModule編譯的，不支持CommonJs的原因，所以我們就需要將CommonJs 轉換為ESModule。

項目中存在兩種情況：

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

 在npm上找了半天也沒找到我需要的插件，針對這個場景，索性自己寫了一個插件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$/}),
  ],
});

轉換 @import ~ 別名

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

webpack的 process.env 的環(huán)境變量在項目中的使用導致的頁面報錯，無法加載

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默認是3000端口，保留原有的端口號
        proxy: {
            '/api': {
                target: 'http://baidu.com/',
                changeOrigin: true,
                rewrite: path => path.replace(/^/api/, '')
            }
        }
    }
})

結束

# 使用vite啟動服務
npm run dev

# 使用webpack啟動服務
npm run dev:w

總結

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

相關文章

最新評論