这篇文章主要讲解了“Vue Cli项目怎么重构为Vite”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue Cli项目怎么重构为Vite”吧！
我们知道 VueCli 使用的是 webpack 打包工具，而 Vite 是基于 ESM 的打包工具，所以我们可以使用 Vite 来替换 VueCli，来提升我们的开发体验。
我们先将项目中的 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.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'
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');移除 babel-eslint parser
// .eslintrc.js
module.exports = {
// ...
// 移除
// parser: 'babel-eslint',
// ...
};移动 public/index.html 至 index.html，并添加 JavaScript 模块 的引入方式
<!-- ... -->
<script type="module" src="/src/main.js"></script>
<!-- ... -->::: tip 提示 <script>标签一般添加在 </body> 前 :::
安装依赖
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" : 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”的内容了，经过本文的学习后，相信大家对Vue Cli项目怎么重构为Vite这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://juejin.cn/post/7223593286697943095
