我们知道 VueCli 使用的是 webpack 打包工具，而 Vite 是基于 ESM 的打包工具，所以我们可以使用 Vite 来替换 VueCli，来提升我们的开发体验。
更新依赖与 package.json
我们先将项目中的 VueCli 相关依赖删除，然后安装 Vite 相关依赖。
::: tip 包管理工具我们使用 pnpm，如果你使用的是 npm 或 yarn，请自行替换。 :::
- 删除
VueCli相关依赖
pnpm remove @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-service- 安装
Vite相关依赖
::: warning 注意 如果你用的是 vue2.6, 请安装 vite-plugin-vue2, 并且不需要 jsx 支持 :::
pnpm add -D vite @vitejs/plugin-vue @vitejs/plugin-vue2 @vitejs/plugin-vue2-jsx- 同时我们可以移除
babel相关依赖
pnpm remove -D babel-plugin-dynamic-import-node babel-eslint- 修改 scripts
修改 package.json 中的 scripts
{
"scripts": {
"dev": "vite --host",
"build:prod": "vite build",
"build:stage": "vite build --mode staging"
}
}配置 Vite
- 创建
vite.config.js，并添加基本配置
import { defineConfig, loadEnv } from 'vite';
// 如果使用的是 vue2.6, 请使用 vite-plugin-vue2
// import { createVuePlugin as vue } from 'vite-plugin-vue2';
import vue from '@vitejs/plugin-vue2';
import { resolve } from 'path';
import rollupNodePolyFill from 'rollup-plugin-node-polyfills';
import { dataToEsm } from '@rollup/pluginutils';
import vueJsx from '@vitejs/plugin-vue2-jsx';
export default ({ mode }) => {
process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') };
return defineConfig({
plugins: [
// vue2.6
// vue({ jsx: true }),
// vue2.7
vue(),
vueJsx(),
],
server: {
port: 75,
proxy: {
[process.env.VITE_APP_BASE_API]: {
target: process.env.VITE_APP_PROXY_API,
changeOrigin: true,
rewrite: (path) => path.replace(new RegExp(`^${process.env.VITE_APP_BASE_API}`), ''),
},
},
},
resolve: {
alias: {
'@': resolve('src'),
},
extensions: ['.js', '.vue', '.json'],
},
});
};- 如果你的项目中使用了 node 的一些模块，需要在
resolve.alias中添加对应的 polyfill
::: tip 提示 需要添加 rollup-plugin-node-polyfills 依赖 :::
defineConfig({
// ...
resolve: {
alias: {
'@': resolve('src'),
// 如果你的项目中使用了node的一些模块，需要在这里添加对应的polyfill，如没有配置.js的extensions，需要在末尾添加.js
path: 'rollup-plugin-node-polyfills/polyfills/path',
}
})- 如果你的项目需要使用
build的配置，可以参考如下配置
defineConfig({
// ...
build: {
rollupOptions: {
output: {
chunkFileNames: 'js/[name]-[hash].js',
entryFileNames: 'js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash][extname]',
// 分离依赖包
manualChunks: {
vue: ['vue'],
echarts: ['echarts'],
'element-ui': ['element-ui'],
},
},
},
},
});- 移除
vue.config.js - 若你的项目中使用了
jsx，请将 '.js' 文件修改为 '.jsx'
全局替换 Env 变量与 require
- 将所有的
process.env替换为import.meta.env，如：
// 替换前
const uploadFileUrl = process.env.VUE_APP_BASE_API + '/upload';
// 替换后
const uploadFileUrl = import.meta.env.VITE_APP_BASE_API + '/upload';::: tip 参考正则 process\.env\.VUE_APP_ replace import.meta.env.VITE_APP_ :::
::: danger 注意 请勿将 vite.config.js 中的 process.env 替换为 import.meta.env :::
- 将所有直接导入的
require替换为import，如：
// 替换前
const { version } = require('../../package.json');
// 替换后
import { version } from '../../package.json';::: tip 参考正则 const\s+\{(.+?)\}\s+=\s+require\((.+?)\); replace import {$1} from $2; :::
- 移除动态导入的
require.context，如：
// 替换前
const svgIcons = require.context('@/assets/icons/svg', false, /\.vue$/);
// 替换后
const svgIcons = import.meta.globEager('@/assets/icons/svg'); - 动态导入的 Vue 路由组件需要调整为
import()，如：
// 替换前
route.component = () => require([`@/views/${route.component}`]);
// 替换后
// 动态导入
const views = import.meta.glob('@/views**.vue');
route.component = views[`@/views/${route.component}.vue`];
// 确定文件路径的动态导入
// 替换前
route.component = () => require('@/views/index/index');
// 替换后
route.component = () => import('@/views/index/index.vue');调整 ESLint 配置
移除 babel-eslint parser
// .eslintrc.js
module.exports = {
// ...
// 移除
// parser: 'babel-eslint',
// ...
};调整 index.html
移动 public/index.html 至 index.html，并添加 JavaScript 模块 的引入方式
<!-- ... -->
<script type="module" src="/src/main.js"></script>
<!-- ... -->::: tip 提示 <script>标签一般添加在 </body> 前 :::
SVG 支持
- 安装依赖
pnpm add -D vite-plugin-svg-icons- 修改
vite.config.js，参考配置如下：
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
defineConfig({
// ...
plugins: [
// ...
createSvgIconsPlugin({
// 图标文件夹中，所有的svg文件将被转换为svg精灵
iconDirs: [resolve(process.cwd(), 'src/assets/icons/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
}),
],
});- 添加虚拟模块至入口文件，如：
// src/main.js
// ...
import 'virtual:svg-icons-register';
// ...- 添加
SvgIcon/index.vue组件
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" rel="external nofollow" />
</svg>
</template>
<script>
import { isExternal } from '@/utils/validate';
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true,
},
className: {
type: String,
default: '',
},
},
computed: {
isExternal() {
return isExternal(this.iconClass);
},
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className;
} else {
return 'svg-icon';
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
};
},
},
};
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
</style>总结
至此，我们已经完成了 vue-cli 项目的迁移，接下来我们可以使用 vite 的各种优势了。
如果遇到构建产物无法正常使用的情况，请在你的动态路由中导入 import.meta.glob
参考
- Vite
- Webpack to Vite
到此这篇关于Vue Cli项目重构为Vite的方法步骤的文章就介绍到这了,更多相关Vue Cli项目重构为Vite内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
