vite.config.ts如何加載.env環(huán)境變量
vite.config.ts加載.env環(huán)境變量
在閱讀vite文檔的時(shí)候，我們知道vite的環(huán)境變量 是在一個(gè)特殊的對(duì)象上，默認(rèn)只有前綴為 VITE_ 的環(huán)境變量會(huì)被加載。
Vite 在一個(gè)特殊的 import.meta.env 對(duì)象上暴露環(huán)境變量。
vite在讀取config配置的時(shí)候（比如說(shuō)本地代理proxy的時(shí)候，或者想要在不同環(huán)境做不一樣的配置）想要拿到配置好的環(huán)境變量，無(wú)法像vue-cli腳手架那樣直接用process.env.xxx來(lái)獲取，也不能直接使用import.meta.env.xxx，需要用到vite提供的一個(gè)方法來(lái)讀取環(huán)境變量。
需要使用vite提供的 loadEnv來(lái)加載環(huán)境變量：
import { loadEnv } from "vite";修改暴露出去的配置
export default ({ mode }) => {
?? ?const env = loadEnv(mode, process.cwd());
?? ?return defineConfig({
?? ??? ?...
?? ?})
}此時(shí)的env就相當(dāng)于import.meta.env
vite.config.ts基礎(chǔ)配置項(xiàng)記錄
使用vite創(chuàng)建vue3+ts項(xiàng)目時(shí)，需要對(duì)vite.config.ts(同vue2中vue.config.js)進(jìn)行一些基礎(chǔ)配置
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue" // 以上兩項(xiàng)生成項(xiàng)目時(shí)默認(rèn)就有，不需要配置
import path from 'path' // 配置文件路徑相關(guān)時(shí)，需要用到此項(xiàng) 由于node不支持ts，需要安裝依賴以便支持 需執(zhí)行如下命令 npm install @types/node --save-dev
// https://vitejs.dev/config/
export default defineConfig({
base: process.env.NODE_ENV === 'production' ? './' : '/', //靜態(tài)資源訪問(wèn)路徑
resolve: {
alias: { // 設(shè)置別名
'@': path.resolve(__dirname, 'src') // 用 @ 符號(hào)替換 src 文件路徑
}
},
build: {
outDir: 'dist',
assetsDir: 'assets', // 指定靜態(tài)資源存放路徑
sourcemap: false, // 是否構(gòu)建source map 文件
terserOptions: {
// 生產(chǎn)環(huán)境移除console
compress: {
drop_console: true,
drop_debugger: true
}
}
},
server: {
https: false, // 是否開(kāi)啟https
port: 8080, // 端口號(hào)
open: true, // 配置后，運(yùn)行項(xiàng)目是自動(dòng)啟動(dòng)瀏覽器
proxy: { // 本地代理
'/api': {
target: "", // 后端接口
changeOrigin: true,
secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
// ws: true, // websocket支持
rewrite: (path) => path.replace(/^\/api/, "")
}
}
},
// 引入第三方的配置
optimizeDeps: {
include: []
},
plugins: [vue()]
})總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中的計(jì)算屬性的使用和vue實(shí)例的方法示例
本篇文章主要介紹了vue計(jì)算屬性的使用和vue實(shí)例的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
vue3?使用setup語(yǔ)法糖實(shí)現(xiàn)分類管理功能
這篇文章主要介紹了vue3?使用setup語(yǔ)法糖實(shí)現(xiàn)分類管理,本次模塊使用 vue3+element-plus 實(shí)現(xiàn)一個(gè)新聞?wù)镜暮笈_(tái)分類管理模塊，其中新增、編輯采用對(duì)話框方式公用一個(gè)表單，需要的朋友可以參考下2022-08-08
Vue3.5中新增的baseWatch函數(shù)用法詳解
在Vue 3.5.0-beta.3版本中新增了一個(gè)base watch函數(shù),這個(gè)函數(shù)用法和我們熟知的watch API一模一樣,下面就跟隨小編一起來(lái)了解一下它的具體使用吧2024-11-11
使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件問(wèn)題
這篇文章主要介紹了使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件,本文是小編給大家總結(jié)的一些表單插件的問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
VueJs監(jiān)聽(tīng)window.resize方法示例
本篇文章主要介紹了VueJs監(jiān)聽(tīng)window.resize方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
element-ui 設(shè)置菜單欄展開(kāi)的方法
今天小編就為大家分享一篇element-ui 設(shè)置菜單欄展開(kāi)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue模板語(yǔ)法中數(shù)據(jù)綁定的實(shí)例代碼
這篇文章主要介紹了Vue模板語(yǔ)法中數(shù)據(jù)綁定的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關(guān)于解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本的相關(guān)資料,這個(gè)報(bào)錯(cuò)是由于在系統(tǒng)上禁止運(yùn)行腳本導(dǎo)致的,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue實(shí)現(xiàn)記住賬號(hào)密碼功能的操作過(guò)程
這篇文章主要介紹了Vue實(shí)現(xiàn)記住賬號(hào)密碼功能,用戶登錄時(shí)若勾選“記住我”功能選項(xiàng)，則將登錄名和密碼（加密后）存入本地緩存，下次登錄頁(yè)面加載時(shí)自動(dòng)獲取保存好的賬號(hào)和密碼（需解密），回顯到登錄輸入框中，下面分享我實(shí)現(xiàn)的具體步驟，需要的朋友可以參考下2022-07-07
vue3+koa實(shí)現(xiàn)文件上傳功能的全過(guò)程記錄
開(kāi)發(fā)項(xiàng)目的時(shí)候,用到文件上傳的功能很常見(jiàn),包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關(guān)于vue3+koa實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下2023-01-01