目录更新依赖与 package.JSON配置 Vite全局替换 Env 变量与 require调整 ESLint 配置调整 index.htmlSVG 支持总结参考我们知道 VueC
我们知道 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
修改 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'],
},
});
};
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');
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" :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
到此这篇关于Vue Cli项目重构为Vite的方法步骤的文章就介绍到这了,更多相关Vue Cli项目重构为Vite内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: VueCli项目重构为Vite的方法步骤
本文链接: https://www.lsjlt.com/news/210382.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0