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元素实现动画过渡效果

    vue元素实现动画过渡效果

    这篇文章主要介绍了vue元素实现动画过渡效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue接口封装的完整步骤记录

    Vue接口封装的完整步骤记录

    对于中小型企业,vue应用越来越多,学习vue相对于react的成本要低点,入门相对简单。这篇文章主要给大家介绍了关于Vue接口封装的相关资料,需要的朋友可以参考下
    2021-05-05
  • Vue学习之常用指令实例详解

    Vue学习之常用指令实例详解

    这篇文章主要介绍了Vue学习之常用指令,结合实例形式详细分析了vue.js创建实例、常用指令及相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • vue使用rules实现表单字段验证

    vue使用rules实现表单字段验证

    这篇文章主要为大家详细介绍了vue使用rules实现表单字段验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue.js根据图片url进行图片下载

    vue.js根据图片url进行图片下载

    最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,本文就介绍了vue.js根据图片url进行图片下载,感兴趣的可以了解一下
    2021-06-06
  • 基于Vue的Drawer组件实现

    基于Vue的Drawer组件实现

    本文将从零实现一个Drawer抽屉组件,组件用 vue2 语法写的,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue中改变了vuex数据视图不更新,也监听不到的原因及解决

    vue中改变了vuex数据视图不更新,也监听不到的原因及解决

    这篇文章主要介绍了vue中改变了vuex数据视图不更新,也监听不到的原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue2.x集成百度UEditor富文本编辑器的方法

    vue2.x集成百度UEditor富文本编辑器的方法

    这篇文章主要为大家详细介绍了vue2.x集成百度UEditor富文本编辑器的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • vue3+ts前端封装EventSource并在请求头添加token的方法

    vue3+ts前端封装EventSource并在请求头添加token的方法

    这篇文章主要介绍了vue3+ts前端封装EventSource并在请求头添加token,本文将介绍如何使用 event-source-polyfill 来解决这个问题,需要的朋友可以参考下
    2024-12-12
  • Jenkins自动化部署Vue项目的方法实现

    Jenkins自动化部署Vue项目的方法实现

    本文主要介绍了Jenkins自动化部署Vue项目的方法实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论