vue3 更换构建工具 webpack 换成 vite

最新推荐文章于 2025-03-09 10:53:18 发布

前端小白一枚

最新推荐文章于 2025-03-09 10:53:18 发布

阅读量1.7k

点赞数

文章标签： webpack 前端 vue.js

本文链接：https://blog.csdn.net/qq_38758763/article/details/130967752

版权

文章介绍了如何在Vite环境中配置Vue项目，包括安装依赖、创建vite.config.js、设置别名、处理文件扩展名、配置服务器、使用ElementPlus、压缩优化以及处理process.isNotDefined错误。同时提到了index.html的位置调整和package.json中脚本的更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装依赖

yarn add vite @vitejs/plugin-vue -D

2、删除vue.config.js，新建文件vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const { resolve } = require('path')
import ElementPlus from 'unplugin-element-plus/vite'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
	define: {
		'process.env': {
			NODE_ENV: import.meta?.env?.MODE
		}
	},
	resolve: {
		// 在webpack中通常我们的项目都会在 alias 中将 src 目录配置为 @ 来便于引用，所以遇到这个报错我们需要再 vite.config.js 中将之前 webpack 的 alias 配置补充进来(同时 vite 中 css 等样式文件的 alias 不需要加 ~ 前缀，所以也需要配置下 ~@)
		alias: {
			'@': resolve(__dirname, './src'),
			'~@': resolve(__dirname, './src')
		},
		// 引入文件时，省略文件后缀名
		extensions: ['.vue', '.js', '.json', '.scss']
	},
	
	server: {
		port: 8030,
		host: '0.0.0.0',
		open: true,
		proxy: {}
	},

	plugins: [
		vue(),
		// 打包优化，需要的就安装插件
		viteCompression({
			threshold: 4096 // 对超过4k的数据压缩
		}),
		ElementPlus({
			importStyle: 'sass',
			useSource: true
		}),
		Components({
			resolvers: [
				ElementPlusResolver({
					// 按需引入修改主题色添加这一行，使用预处理样式
					importStyle: 'sass'
				})
			]
		}),
		AutoImport({
			resolvers: [
				ElementPlusResolver({
					// 按需引入修改主题色添加这一行，使用预处理样式,不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
					importStyle: 'sass'
				})
			]
		})
	],

	build: {
		rollupOptions: {
			input: {
				index: resolve(__dirname, 'index.html')
			},
			// 构建后的文件进行分类
			output: {
				chunkFileNames: 'js/[name]-[hash].js',
				entryFileNames: 'js/[name]-[hash].js',
				assetFileNames: (assetInfo) => {
					const info = assetInfo.name.split('.')
					let extType = info[info.length - 1]
					if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)) {
						extType = 'media'
					} else if (/\.(png|jpe?g|gif|svg|ico)(\?.*)?$/.test(assetInfo.name)) {
						extType = 'img'
					} else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
						extType = 'fonts'
					}
					return `${extType}/[name]-[hash][extname]`
				}
			}
		}
	},

	css: {
		preprocessorOptions: {
			scss: {
				// 全局的scss文件以及更换的element 主题scss文件
				additionalData: `
					@use '~@/css/custom.scss' as *;
				`
			}
		}
	}
})

3、更换index.html位置，并增加index.html内容

// 添加入口文件的引用( /src/main.js 指向项目的入口文件)：
<script type="module" src="./src/main.js"></script>

从public文件中移到最外层和src同级。注意文件中的 <%= htmlWebpackPlugin.options.title %> 等变量不能使用，不然会报错。
报错显示 htmlWebpackPlugin is not defined
解决：
1、不使用变量，删除或者换成固定文字
2、安装 vite-plugin-html 插件
将 index.vite.html 中所有的 htmlWebpackPlugin.options.xxx 修改为 xxx（下面的title就是xxx）
在vite.config.js 中

export default defineConfig({
  plugins: [
    createHtmlPlugin({
	    inject: {
	      data: {
	          title: '我的项目',
	       },
	     },
    }),
  ]
})

4、在package.json中增加动命令

  "scripts": {
    "serve": "vite",
    "build": "vite build",
    "lint": "vite lint"
  },

4、报错

报错： ReferenceError: process is not defined
这是因为 webpack 启动时会根据 node 环境将代码中的 process 变量会将值给替换，而 vite 未替换该变量，所以在浏览器环境下会报错。

export default defineConfig({
	define: {
		'process.env': {
			NODE_ENV: import.meta.env.MODE
		},
		// 其他自定义变量
		VUE_APP_HOST: 'demo-api.com', // 这里需要注意定义为一个字符串
	},
})