Vite2.0+Vue3.0+Element-Plus+TypeScript 配置及注意事项补充

1. 本人在此刊载的原创作品，其版权归属本人所有 2. 任何传统媒体、商业公司或其他网站未经本人的授权许可，不得擅自从本人转载、转贴或者以任何其他方式复制、使用上述作品 3. 传统媒体、商业公司或其他网站对上述作品的任何使用，均须事先与本人联系 4. 对于侵犯本人的合法权益的公司、媒体、网站和人员，本人聘请的律师受本人的委托，将采取必要的措施，通过包括法律诉讼在内的途径来维护本人的合法权益

本文链接：https://blog.csdn.net/qq_31140865/article/details/126453155

本文详细介绍了在Vite2.0和Vue3.0环境中，使用Element-Plus和TypeScript时可能遇到的问题及解决方案，包括import路径报错、ElementUi整合、scriptsetup标签的使用以及import.meta.env环境变量的配置。通过提供配置示例和解释，帮助开发者解决这些问题，确保项目的顺利进行。

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

Vite2.0+Vue3.0+Element-Plus+TypeScript 配置及注意事项补充

1.注意事项

1.注意事项

1.1 import 导包路径爆红！原因：

可能是没有导包，WebStorm可以把鼠标放到爆红依赖上按Alt+Enter 添加依赖，其他IDE可以手动将依赖添加到package.json手动，再执行npm install 。这种情况过于一般，以至于发生概率并不高。

可能是路径配置问题，检查 vite.conf.ts 确定已经在 defineConfig 配置中添加过了resolve的别名解析，alias 别名解析会把@与src目录做映射处理, 这里需要注意一下 extensions 中添加想要省略 .vue 的文件名后缀，即不想在导包时写.vue的后缀，vite 官方的说明里是不建议这么配置的，因为会影响IDE和类型支持，所以我也没加 .vue 的忽略配置，导入模块时在路径中配置完整的 .vue 后缀即可：

	//vite.conf.ts 文件中的解析配置
	resolve: {
		//别名解析，把@与src目录做映射处理
		alias: {
			'@': resolve(__dirname, './src')
		},
		//导入时想要省略的扩展名列表
		extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
	}

在这里插入图片描述
对于自定义的扩展名，请导入完整路径，IDE不会报错，并且点击后也可以直接进入文件，如下图就是写了完整的路径包含了.vue的后缀：

确认typescript的 tsconfig.json 配置项目选项 compilerOptions 中已经对基础路径做过映射配置，paths 设置模块名称基于baseUrl的路径映射关系置：

  /* 项目选项 */
  "compilerOptions": {
    //设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
    "baseUrl": ".",
    //设置模块名称基于baseUrl的路径映射关系
    "paths": {
      "@/*": ["src/*"]
    }
 }

如果你的路径还爆红，嗯，那个文件应该是不存在的！建一个！

1.2 整合ElementUi提示命令名空间不存在

#根模块增加标签
<el-config-provider namespace="ep">
</el-config-provider>

1.3 Vue文件中的 script setup 标签解释

在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 script 标签语法，它具有更多优势：

更少的样板内容，更简洁的代码。
能够使用纯 TypeScript 声明 props 和自定义事件。
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。
与普通的 script 标签只在组件被首次引入的时候执行一次不同，script setup 中的代码会在每次组件实例被创建的时候执行。
写在内部的函数和变量可以直接在模板中使用，import导入的方法也可以直接使用无需使用method函数暴露。

1.4 import.meta.env.VITE_API_URL 路径爆红

使用 import.meta.env.VITE_自定义环境变量时路径爆红

先上vite环境变量官方配置：https://cn.vitejs.dev/guide/env-and-mode.html#env-files

检查env.d.ts 文件的位置，如果改文件在src目录下则内容可以被直接加载否则需要在 tsconfig.json 中配置 ./env 的路径。

  "compilerOptions": {
      "types": [
      "node",
      "./env"
    ]
  }

env.d.ts内容如下，env.d.ts文件中声明了导入的环境变量，下面定义了两个自定义的变量官方文档只建议VITE_开头，防止泄露变量到客户端：

/// <reference types="vite/client" />

interface ImportMetaEnv {
	readonly VITE_APP_TITLE: string
	readonly VITE_API_URL: string
	// 更多环境变量...
}

interface ImportMeta {
	readonly env: ImportMetaEnv
}