本文将介绍以下内容

环境变量配置
vite.config.ts 环境变量配置
[Element-plus]error TS2304: Cannot find name 'ElMessage'
[ts]error TS2307: Cannot find module '@/****' or its corresponding type declarations
常见错误

环境变量配置

环境变量文件的创建

在项目根目录中，创建以下环境变量文件：

.env.development: 用于开发环境的环境变量配置。
.env.production: 用于生产环境的环境变量配置。
.env.<环境名称>: 如果你有其他环境（如测试环境），可以创建对应的环境变量文件。

这些文件中的变量将根据不同的环境加载。

环境变量的设置

打开相应的环境变量文件，并按照需要设置变量，每个变量一行

// .env.development

VITE_API_URL = http://127.0.0.1
VITE_DEBUG_MODE = true

// .env.production

VITE_API_URL = http://production-api.com
VITE_DEBUG_MODE = true

配置文件的修改

在 Vite 项目中，修改vite.config.ts文件来加载相应的环境变量文件。

import { defineConfig, loadEnv } 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'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode })=>{
  const env = loadEnv(mode, process.cwd());

  return{
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      })
    ],
    resolve: {
      alias: {
        '@': '/src'
      }
    },
    define: {
      // 注入环境变量
      'process.env': env,
    }
  }
});

这样会根据当前的构建模式（开发模式或生产模式）加载对应的环境变量文件，并将其注入到应用程序中。

运行配置

修改package.json文件中的脚本命令，以指定不同的构建模式

{
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc && vite build",
        "preview": "vite preview"
    }
}

在开发过程中，我们可以运行npm run dev启动开发服务器。它会加载.env.development文件中的环境变量。

当你准备构建生产包时，运行npm run build命令。它会加载.env.production文件中的环境变量。

如果你还有其他环境，可以使用类似的方式创建相应的命令和环境变量文件，然后运行对应的命令即可。

vite.config.ts 环境变量配置

注意 defineConfig(({ command, mode })=>{})

defineConfig 函数的参数包含 command 和 mode 两个属性，可以根据需要进行配置。

command 属性表示当前运行的 Vite 命令，例如 build、serve 等。而 mode 属性表示当前的构建模式，可以是 development、production 或其他自定义的环境名称。

在上述示例中，根据 command 的不同，可以根据需要进行特定命令的配置。同样，根据 mode 的不同，可以针对不同的构建模式进行特定的配置。

通过使用 command 和 mode 参数，你可以灵活地根据运行命令和构建模式来定制 Vue 3 + Vite + TypeScript 项目的配置，以满足不同环境的需求。

[Element-plus]error TS2304: Cannot find name 'ElMessage'

确保已安装 Element-plus :npm install element-plus
main.ts 引入 ElementPlus

vite.config.ts中配置

error TS2304 (找不到 ElMessage)
解决方法：在tsconfig.json中include 引入 auto-imports.d.ts 文件

[ts]error TS2307: Cannot find module '@/****' or its corresponding type declarations

错误 TS2307 表示 TypeScript 找不到模块 '@/****' 或其对应的类型声明文件。

这个错误通常是由以下原因导致的：

路径错误： 确保路径 '@/****' 是正确的，并与实际文件的路径和文件名一致。检查文件系统中的文件位置，确保文件存在于指定的路径中。
别名配置错误： 如果你在项目中使用了路径别名，例如 '@'，确保你正确配置了 TypeScript 的 tsconfig.json 文件中的 paths 选项。检查 tsconfig.json 文件中的别名配置，确保别名正确映射到实际的文件路径。

{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } }

缺少类型声明文件： 如果该模块的对应类型声明文件（.d.ts）不存在，TypeScript 会报错。在确保路径和别名配置正确的情况下，你可能需要确保有相应的类型声明文件存在或正确导入。如果没有类型声明文件，你可以尝试使用 "allowJs": true 和 "checkJs": false 选项来禁用对 JavaScript 文件的类型检查。

常见错误

缺少依赖或插件安装错误： 在使用 Vue 3 + Vite 时，确保你已经安装了所需的依赖和插件，并正确配置了 package.json 文件。常见的依赖包括 Vue、Vite 和其他你所需的插件。检查你的 package.json 文件，并确保依赖项的版本和配置正确。
配置错误或丢失的文件： 确保你的 Vite 配置文件 vite.config.js（或 vite.config.ts）存在，并正确配置了必要的设置。常见的错误包括拼写错误、语法错误或配置文件位置不正确。确保文件名和路径正确，并检查配置选项的语法和值是否正确。
ES 模块导入错误： 在 Vue 3 + Vite 中，默认使用 ES 模块的导入语法。如果你在代码中使用了 CommonJS 或其他模块系统的导入语法（例如使用 require()），会导致错误。确保你使用了正确的 ES 模块导入语法，例如使用 import 和 export。
缓存或构建问题： 如果你在修改配置或依赖后遇到问题，尝试清除 Vite 的缓存或重新构建你的应用。可以尝试删除 node_modules 文件夹，并重新安装依赖，或者执行 npm run clean 清除缓存，然后重新运行项目。
环境变量配置错误： 如果你在配置环境变量时遇到问题，确保在正确的文件（如 .env、.env.development、.env.production）中设置了正确的变量名和值。注意环境变量在 Vite 中的使用方式可能与其他构建工具不同，你可以查阅 Vite 的文档以了解正确的环境变量配置方式。
插件或组件使用错误： 如果你在使用某个插件或组件时遇到问题，确保你正确导入了插件或组件，并按照其文档进行了正确的使用。有时候插件或组件的文档可能不完整或过时，你可以查看其 GitHub 存储库或讨论区寻求解决方案。

四时宝库

程序员的知识宝库

Vue3项目实践-第七篇(环境配置)（vue运行环境搭建详解）