vue3 jsx项目webpack改造vite
2023-02-02 本文已影响0人
初心不改_0055
1、根目录新建文件 vite.config.ts
import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import pluginStyleImport from 'vite-plugin-style-import';
import { viteRequire } from 'vite-require';
// https://vitejs.dev/config/
export default defineConfig({
base: './',
server: {
port: 8902,
},
build: {
outDir: resolve(__dirname, './dist'),
assetsDir: 'static',
rollupOptions: {
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
},
},
terserOptions: {
// 清除console和debugger
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
resolve: {
alias: [
{ find: '@', replacement: resolve(__dirname, 'src') },
{ find: /^~/, replacement: '' },
],
},
define: {
// .env环境变量这里定义兼容
'process.env': {
VUE_APP_ENV: 'prod',
},
},
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
plugins: [
vue(),
vueJsx(),
// 兼容vite不支持require
viteRequire(),
pluginStyleImport({
// ant-design-vue样式按需加载
libs: [
{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/css`;
},
},
],
}),
],
});
2、安装依赖
npm i --D vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx vite-plugin-style-import@^1.4.1 vite-require
3、将/public/index.html文件移动至项目根目录
并在<div id="app"></div>后追加<script type="module" src="./src/main.ts"></script>
如：
<!DOCTYPE html>
<html lang="">
<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="/favicon.ico" />
<title>示例</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.ts"></script>
<!-- built files will be auto injected -->
</body>
</html>
4、修改package.json文件scripts
// 原scripts
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
}
// 修改后scripts
"scripts": {
"preview": "vite preview --host",
"serve": "vite --host",
"build": "vite build",
}
5、运行
npm run serve
Vite 不再支持 Node 12 / 13 / 15，因为上述版本已经进入了 EOL 阶段。现在你必须使用 Node 14.18+ / 16+ 版本。
