vite.config.ts如何加载.env环境变量

 更新时间:2023年10月10日 08:36:21   作者:ZhuAiQuan  
这篇文章主要介绍了vite.config.ts加载.env环境变量方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vite.config.ts加载.env环境变量

在阅读vite文档的时候,我们知道vite的环境变量 是在一个特殊的对象上,默认只有前缀为 VITE_ 的环境变量会被加载。

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。

vite在读取config配置的时候(比如说本地代理proxy的时候,或者想要在不同环境做不一样的配置)想要拿到配置好的环境变量,无法像vue-cli脚手架那样直接用process.env.xxx来获取,也不能直接使用import.meta.env.xxx,需要用到vite提供的一个方法来读取环境变量。

需要使用vite提供的 loadEnv来加载环境变量:

import { loadEnv } from "vite";

修改暴露出去的配置

export default ({ mode }) => {
?? ?const env = loadEnv(mode, process.cwd());
?? ?return defineConfig({
?? ??? ?...
?? ?})
}

此时的env就相当于import.meta.env

vite.config.ts基础配置项记录

使用vite创建vue3+ts项目时,需要对vite.config.ts(同vue2中vue.config.js)进行一些基础配置

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"  // 以上两项生成项目时默认就有,不需要配置
import path from 'path' // 配置文件路径相关时,需要用到此项  由于node不支持ts,需要安装依赖以便支持 需执行如下命令 npm install @types/node --save-dev
// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? './' : '/', //静态资源访问路径
  resolve: {
    alias: { // 设置别名
      '@': path.resolve(__dirname, 'src') // 用 @ 符号替换 src 文件路径
    }
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets', // 指定静态资源存放路径
    sourcemap: false, // 是否构建source map 文件
    terserOptions: {
      // 生产环境移除console
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },
  server: {
    https: false, // 是否开启https
    port: 8080, // 端口号
    open: true, // 配置后,运行项目是自动启动浏览器
    proxy: { // 本地代理
      '/api': {
        target: "", // 后端接口
        changeOrigin: true,
        secure: false, // 如果是https接口,需要配置这个参数
        // ws: true, // websocket支持
        rewrite: (path) => path.replace(/^\/api/, "")
      }
    }
  },
  // 引入第三方的配置
  optimizeDeps: {
    include: []
  },
  plugins: [vue()]
})

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue取消Axios发出的请求

    Vue取消Axios发出的请求

    axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。首先需要知道:axios不是一种新的技术。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范
    2022-09-09
  • Vue3实现动态面包屑的代码示例

    Vue3实现动态面包屑的代码示例

    这篇文章主要给大家介绍一下Vue3动态面包屑是如何实现的,实现思路又是什么,以及发给大家介绍一下面包屑的功能,文章通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • Vue router动态路由实现过程

    Vue router动态路由实现过程

    Vue动态路由(约定路由),听起来好像很玄乎的样子,但是你要是理解了实现思路,你会发现没有想象中的那么难,下面这篇文章主要给大家介绍了关于vue实现动态路由添加功能的简单方法,需要的朋友可以参考下
    2023-03-03
  • vue3组件传参的N种方法总结大全

    vue3组件传参的N种方法总结大全

    vue传参的方式有很多种,不管是vue2还是3,这篇文章主要介绍了vue3组件传参的N种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-08-08
  • 如何使用vue slot创建一个模态框的实例代码

    如何使用vue slot创建一个模态框的实例代码

    这篇文章主要介绍了如何使用vue slot创建一个模态框,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • Nginx同一端口部署多个前后端分离的vue项目完整步骤

    Nginx同一端口部署多个前后端分离的vue项目完整步骤

    最近做项目结构优化,前端项目都是部署在nginx上,想实现同一个端口可以访问多个前端项目,所以就有了本文,这篇文章主要给大家介绍了关于Nginx同一端口部署多个前后端分离的vue项目的相关资料,需要的朋友可以参考下
    2023-10-10
  • vue-router懒加载速度缓慢问题及解决方法

    vue-router懒加载速度缓慢问题及解决方法

    这篇文章主要介绍了vue-router懒加载速度缓慢问题及解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue3中的数据劫持的最新实现方案的proxy示例详解

    vue3中的数据劫持的最新实现方案的proxy示例详解

    Vue3中使用Proxy实现数据劫持,解决了Vue2中数组和对象劫持的遗留问题,Proxy可以修改某些操作的默认行为,通过get和set方法实现数据的劫持和保护机制,感兴趣的朋友跟随小编一起看看吧
    2024-11-11
  • vue 按钮 权限控制介绍

    vue 按钮 权限控制介绍

    这篇文章主要介绍了vue 按钮 权限控制,在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限,必须当有删除权限时,就显示删除按钮,下面我们就来了解一下具体的解决方法,需要的朋友也可以参考一下
    2021-12-12
  • element el-tree折叠收缩的实现示例

    element el-tree折叠收缩的实现示例

    本文主要介绍了element el-tree折叠收缩的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论