Vue3.0+vite vite.config.ts配置与env

目录

摘要

        在项目中新项目前期可能需要配置各种来运行项目，以Vue3.0+vite来说明主要配置

正文

1.import.meta的理解

JavaScript中的一个特殊对象，它提供了有关当前模块的元数据信息。

2.env配置

 访问evn命令

要获取环境变量，可以通过import.meta.env来访问。下面是一个示例：

3.package.json配置

项目启动命令 

4.vite.config.ts配置

---

摘要

        在项目中新项目前期可能需要配置各种来运行项目，以Vue3.0+vite来说明主要配置

正文

1.import.meta的理解

JavaScript中的一个特殊对象，它提供了有关当前模块的元数据信息。

它包含以下属性：

1. import.meta.url：表示当前模块的URL地址，可以用于获取当前模块的路径信息。
2. import.meta.scriptElement：表示当前模块的script元素，可以用于获取当前模块所在的HTML页面中的script标签。

3.标题import.meta.env是一个全局属性，它包含了许多有用的环境信息，比如MODE、BASE_URL等。你可以在任何Vue组件、模块或文件中使用它来获取这些环境变量。

使用import.meta可以方便地获取当前模块的一些相关信息，例如获取模块的URL地址或者与HTML页面中的其他元素进行交互。

2.env配置

项目根文件建立以下.env文件

.env.development（开发）

# 应用端口 如果要变更port可以配置
VITE_APP_PORT = 3000

# base api

VITE_APP_BASE_API = '/dev-api'
...

.env.staging（测试）

# base api

VITE_APP_BASE_API = 'https://dev/xxx'
...

.env.production（生产）

# base api

VITE_APP_BASE_API = 'https://api/xxx'
...

注意：为了在 Vue 3 中使用环境变量，你需要将它们以VUE_APP_（vite前缀VITE_APP_）前缀开头命名，以便在构建过程中被正确地注入到应用程序中

 访问evn命令

 console.log(import.meta.env, 'import.meta')

其他：process.env.NODE_ENV

要获取环境变量，可以通过import.meta.env来访问。下面是一个示例：

const { VITE_APP_BASE_API} = import.meta.env;

console.log(VITE_APP_BASE_API);

3.package.json配置