vue2项目webpack转vite经验帖
项目技术栈：vue 2.6.11、vue-router、elementUI、webpack
第一步
npm install @originjs/webpack-to-vite -g
第二步
webpack-to-vite -d ./
此时根目录下会新增index.html、vite.config.js文件
packagge.json文件会新增
{
"scripts": {
"serve-vite": "vite",
"build-vite": "vite build",
"preview-vite": "vite preview"
},
"devDependencies": {
"@originjs/vite-plugin-commonjs": "^1.0.1",
"@originjs/vite-plugin-require-context": "1.0.9",
"vite": "^3.0.0",
"vite-plugin-vue2": "^1.5.1",
// "@vitejs/plugin-vue2": "^2.2.0", 不会有此项，如果项目是2.6.x以下版本则需要用此项替换上一行的插件
"vite-plugin-env-compatible": "^1.1.1",
"vite-plugin-html": "3.2.0",
}
}
第三步
对文件配置进行修改
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./public/index_icon.png">
<title>运营中台title>
<script src="./public/lib//PAIMLib-1.5.7.min.js">script>
<script type="text/javascript" src="http://xxx.com/cityjson">script>
head>
<body>
<noscript>
<strong>We're sorry but web doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
noscript>
<div id="app">div>
<script type="module" src="./src/main.js">script>
body>
html>
vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue2'
import ViteRequireContext from '@originjs/vite-plugin-require-context'
import envCompatible from 'vite-plugin-env-compatible'
import { createHtmlPlugin } from 'vite-plugin-html'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: [
// 根据项目情况自行配置路径转化
{
find: /^~/,
replacement: path.resolve(__dirname, '')
},
{
find: '@',
replacement: path.resolve(__dirname, './src')
},
{
find: 'view',
replacement: path.resolve(__dirname, './src/views')
},
{
find: 'comp',
replacement: path.resolve(__dirname, './src/components')
},
{
find: 'serve',
replacement: path.resolve(__dirname, './src/serve')
},
{
find: 'utils',
replacement: path.resolve(__dirname, './src/utils')
}
],
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
plugins: [
vue(), // 更换为此种形式
ViteRequireContext(),
viteCommonjs(),
envCompatible(),
createHtmlPlugin({
inject: {
data: {
title: 'jarvis-pc'
}
}
})
],
// 增加css和less预处理器，解决样式转换问题
css: {
// css预处理器
preprocessorOptions: {
less: {
charset: false,
javascriptEnabled: true,
additionalData: `@import "${path.resolve(__dirname, 'src/assets/style/theme.less')}";`
}
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 全局less变量存储路径
// path.resolve(__dirname, 'src/assets/style/theme.less'),
path.resolve(__dirname, 'src/assets/style/common/element.less'),
path.resolve(__dirname, 'src/assets/style/common-comps.less')
]
}
}
},
base: '/xxx/',
server: {
strictPort: false,
port: 8986,
host: '0.0.0.0',
open: true,
headers: {
'Access-Control-Allow-Origin': '*'
},
https: false,
// 根据项目情况自行配置代理
proxy: {
'/api/': {
target: 'xxx',
ws: false,
changeOrigin: true,
timeout: 180000
}
}
},
build: {
outDir: 'dist/jarvis-pc'
}
})
第四步
vite不支持module.export的语法，因此项目中有这些语法的要转转换为export、或者export default的写法
列子
module.export = {
AJAX_BASE_URL: '/',
STATIC_BASE_URL: '/xxx/'
}
const AJAX_BASE_URL = '/'
const STATIC_BASE_URL = '/xxx/'
export { AJAX_BASE_URL, STATIC_BASE_URL }
途径中踩了一些坑点
- css和less文件处理不了
- index.html的文件路径找不到
- module.export无法识别
- 代理配置不对
- vite-plugin-vue2不支持vue2.6.x以下的版本导致el-table不显示也不报错，这个是消耗最多时间的坑点，转换为@vitejs/plugin-vue2即可
在完成上述操作后，项目也完成了webpack到vite的转化，实测项目启动时间由原来的23s缩短至2s，开发效率极高，但是最后还是不可以应用于生产，原因是由于项目中有微前端服务，但是那个微前端的项目是引用的其他团队的项目，不能push其他团队和我们一同更改，因此这个只能应用于开发环境，提升我们的开发体验