vite -- require is not defined （问题解决，亲测好用）

第068个

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

本文章目录

• • 专栏目标
  • 所遇问题
  • 解决办法
  • 项目示例效果
  • 示例源代码
  • 核心配置
  • 其他解决办法
  • 文献参考

所遇问题

经过一番配置，可以用vite来搭建vue2的项目了，但是在demo页面，使用require的方法引用图片的时候，遇到了问题。 ReferenceError: require is not defined

究其原因是Vite不支持require这个方法。

解决办法

本博主使用的方法是使用vite-plugin-require-transform插件作为转换，是其能在项目中使用require，具体的请参考下方的核心配置。

项目示例效果

示例源代码

<template>
	<div class="container">
		<h1>欢迎来到大剑师的GIS世界</h1>
		<h3 style="color: #42B983; cursor: pointer; " @click="goUrl()">点击查看blog</h3>
		
		<div style="margin-top: 50px;">
			 <img :src='url1'  alt="">
		</div>
		<p> 本示例代码基于 vue2+vite 开发</p>
		<P style="color: #42B983;  cursor: pointer;" @click="goUrl2()"> 点击下载</P>

	</div>
</template>

<script>

	import imgurl from "@/assets/dajianshi.png";	
	export default {
		name: 'dajianshiGIS',
		data() {
			return {
				url:imgurl,
				url1:require("@/assets/dajianshi.png"),
			}
		},
		methods: {
             goUrl(){
				 window.location.href='https://blog.csdn.net/cuclife'
			 },
			 goUrl2(){
			 	window.location.href='https://download.csdn.net/download/cuclife/88777526'
			 }
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.container {
		width: 1000px;
		height: 500px;
		margin: 50px auto;
		border: 1px solid #42B983;
		padding-top: 50px;
	}

</style>

核心配置

安装依赖

vite.config.js 配置

import { defineConfig } from 'vite' // 动态配置函数
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'
import requireTransform from 'vite-plugin-require-transform';   //核心代码

export default () =>
	defineConfig({
		plugins: [
			createVuePlugin(),
			requireTransform({fileRegex: /.js$|.vue$/})     //核心代码
			],
		server: {
			open: true, //自动打开浏览器
			port: 8765 //端口号
		},
		resolve: {
			alias: [
				{
					find: '@',
					replacement: '/src'
				}
			]
		}
	})

其他解决办法

（1） 如同示例，url采用import导入的方式， 不适用require。
（2）、本身项目没有使用require语法，那就是第三方包内部用了require语法

vite.config.js中代码

import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
  plugins: [ commonjs()],
  build: {
	  commonjsOptions: {
	    transformMixedEsModules: true
	  }
  }
})

文献参考

https://www.npmjs.com/package/vite-plugin-require-transform
https://www.npmjs.com/package/vite-plugin-commonjs