vue开发者vite多环境配置，终于搞明白了

发布时间：2023-05-19 文章分类：WEB开发, 电脑百科 投稿人：赵颖 字号： 默认 | 大 | 超大 打印

vue开发者vite多环境配置，终于搞明白了

在看项目的过程中，发现有类似服务端多环境配置的配置，所以研究了下，在网上有多个方案，选了一个当前在用的吧，另外一个没验证

1、原理

对于使用Vite构建的Vue项目，可以使用Vite提供的环境变量来实现多环境配置。

Vite 使用 dotenv 从 环境文件目录 中加载环境文件，默认情况下，环境文件目录为项目的根目录，即把环境文件放在项目根目录下。

环境文件命名如下：

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

不同环境的变量可以定义在 .env.[mode] 文件中，如 .env.dev、.env.prod 等，如果 .env 文件和 .env.[mode] 中有相同的 key，后者定义的值会覆盖前者。

这里咱们以三个环境为例编写 demo，分别是：

2、创建配置文件 

使用 .env 文件来设置特定环境的变量。Vite 会自动加载 .env 文件，而且支持使用不同的 .env 文件来为不同的环境提供变量。

在项目根目录下创建.env.dev、.env.test和.env.prod等环境变量文件，并在其中定义各个环境的变量。例如：

NODE_ENV="development"
VITE_BASE_API="http://172.26.1.152:80"
VITE_BASE_WS="ws://172.26.1.152:18083"

注意，变量名必须以VITE_开头，这是Vite默认的前缀。

3、使用多环境配置

package.json中配置启动脚本，使用配置

  "scripts": {
    "dev": "vite --mode dev",
    "test": "vite --mode test",
    "prod": "vite --mode prod",
    "build": "vue-tsc && vite build",
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    "build:prod": "vue-tsc --noEmit && vite build --mode prod",
    "preview": "vite preview"
  },

4、使用环境变量

在Vue组件中使用环境变量：

<template>
  <div>
    <p>{{ apiURL }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      apiURL: import.meta.env.VITE_BASE_API
    }
  }
}
</script>

在Vue组件中可以通过import.meta.env.VITE_API_URL来访问环境变量。

5、关于编辑器提示

可以添加 vite-env.d.ts解决。如果不存在这个文件，在 src 目录下创建文件 vite-env.d.ts，我的项目下有，不记得是不是自己手动创建了

/// <reference types="vite/client" />
​
interface ImportMetaEnv {
  readonly VITE_BASE_API: string;
  readonly VITE_BASE_WS: string;
}
​

6、最后验证下

main.ts 打印下环境变量

vue开发者vite多环境配置，终于搞明白了

客户端访问，打开控制台可以看到环境变量，试着切换下看看生效了吗

vue开发者vite多环境配置，终于搞明白了

7、process.env和import.meta.env

process.env是Node.js中的全局变量，用于访问进程中的环境变量。在前端开发中，我们通常使用Webpack等构建工具来打包应用程序，因此需要在构建过程中设置环境变量。在Webpack中，可以使用DefinePlugin插件将环境变量注入到应用程序中，然后在代码中通过process.env来访问这些变量。

例如，在Webpack中设置一个名为API_URL的环境变量，可以在代码中通过process.env.API_URL来访问它：

// webpack.config.js
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify('https://api.example.com')
    })
  ]
}
// app.js
console.log(process.env.API_URL) // 'https://api.example.com'

import.meta.env是在ES模块中定义的全局变量，用于访问Vite构建的应用程序中的环境变量。在Vite中，可以在.env文件中定义环境变量，然后在Vue组件和JavaScript模块中通过import.meta.env来访问这些变量。

需要注意的是，process.env和import.meta.env的作用域不同，前者作用于整个Node.js进程，后者只作用于当前的JavaScript模块或Vue组件。因此，它们的用法和使用场景也有所不同。

推荐一本书

  1. 树立正确的Git观念，可以让你在工作中选用正确的Git指令。
  2. 终端机指令搭配图行界面工具，使学习效率倍增。
  3. 不只教你如何用，还能让你知道自己在用什么，以及为什么要这么用。

京东自营购买链接：

《Git从入门到精通》(高见龙)【摘要 书评 试读】- 京东图书

 vue开发者vite多环境配置，终于搞明白了

标签 , ,