vue3+js?Vite多環(huán)境端口配置以及@別名設置的一次嘗試過程
一、相對路徑別名設置
看見有兩種寫法的，試了一下都可以，但用__dirname的似乎比較多
1. 方法一：使用 resolve(__dirname, “./src”)
編輯vite.config.js文件：
import { resolve } from "path";
resolve: {
alias: {
// 起個別名，在引用資源時，可以用‘@/資源路徑'直接訪問
"@": resolve(__dirname, "./src")
}
},
如果提示 找不到 path 或其相對應的類型聲明：
npm install @types/node --save-dev
2. 方法二：使用 fileURLToPath(new URL(‘./src’, import.meta.url))
編輯vite.config.js文件：
import { fileURLToPath, URL } from 'node:url'
resolve: {
alias: {
// 起個別名，在引用資源時，可以用‘@/資源路徑'直接訪問
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
編輯package.json文件：
"type": "module"
3. 區(qū)別
3.1 new URL(‘./src’, import.meta.url)
import.meta.url ：返回當前模塊的完整 file:// URL（如 file:///project/src/index.js）
需配合 new URL() 解析相對路徑，再通過 fileURLToPath 將 URL 轉換為文件系統(tǒng)路徑。
要求: 必須在 ESM 文件中使用（即 package.json 中需設置 “type”: “module”，或文件后綴為 .mjs）。
3.2 resolve(__dirname, “./src”)
__dirname ：返回當前文件所在目錄的絕對路徑（如 /project/src）。
通過 resolve(__dirname, "./src") 拼接路徑。
要求: 只能在 CommonJS 文件中使用（默認的 .js 或 .cjs 文件）。
3.3 總結
| fileURLToPath(new URL(‘./src’, import.meta.url)) | resolve(__dirname, “./src”) | |
|---|---|---|
| 模塊系統(tǒng) | ESM | CommonJS |
| 路徑基準 | 相對于當前文件 URL | 相對于當前文件目錄 |
4. 可選配置 jsconfig.json
作用是讓編輯器（如 VS Code）識別路徑別名，提供代碼提示、跳轉等智能支持。
若不配置 jsconfig.json，Vite 項目仍可運行，但編輯器可能無法識別別名，顯示路徑錯誤提示（實際不影響構建結果）。
在項目根目錄創(chuàng)建/修改 jsconfig.json，告知編輯器路徑別名的映射關系：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
二、多環(huán)境端口配置
vite:官方文檔對環(huán)境配置的描述： https://vitejs.cn/vite3-cn/guide/env-and-mode.html#env-variables
1. 關于.env 文件
.env # 所有情況下都會加載
.env.local # 所有情況下都會加載，但會被git 忽略
.env.[mode] # 只在指定模式下加載
.env.[mode].local #只在指定模式下加載，但會被 git 忽略
環(huán)境加載優(yōu)先級：.env.[mode] > .env
2. 創(chuàng)建.env文件
在根目錄下創(chuàng)建以下文件(和vite.config.js保持同級目錄)：
PS: 寫環(huán)境變量和其它變量，必須要以VITE_開頭，例如 :
若環(huán)境變量和其它變量不想以VITE_開頭 ，則可以在 vite.config.js 文件中添加
envPrefix: "自定義開頭"
2.1 .env文件 (全局環(huán)境)
# title VITE_GLOB_APP_TITLE = 'vue-demo' # port VITE_PORT = 3301 # open 運行 npm run dev 時自動打開瀏覽器 VITE_OPEN = true # 是否生成包分析文件 VITE_REPORT = false # 是否開啟gzip壓縮 VITE_BUILD_GZIP = false # 是否刪除生產(chǎn)環(huán)境 console VITE_DROP_CONSOLE = true
2.2 .env.development文件 (本地環(huán)境)
# 本地環(huán)境 NODE_ENV = 'development' # 本地環(huán)境接口地址 VITE_API_URL = 'http://localhost:3301'
2.3 .env.production文件 (線上環(huán)境)
# 線上環(huán)境 NODE_ENV = "production" # 線上環(huán)境接口地址 VITE_API_URL = "http://localhost:8082"
2.4 .env.test文件 (測試環(huán)境)
# 測試環(huán)境 NODE_ENV = "test" # 測試環(huán)境接口地址 VITE_API_URL = "http://localhost:8083"
3. 修改 package.json 文件
默認情況下，開發(fā)服務器 (dev 命令) 運行在 development (開發(fā)) 模式，而 build 命令則運行在 production (生產(chǎn)) 模式。
你可以通過傳遞 --mode 選項標志來覆蓋命令使用的默認模式
"dev": "vite --mode development", "test": "vite --mode test", "prod": "vite --mode production", "build:dev": "vite build --mode development", "build:prod": "vite build --mode production", "build:test": "vite build --mode test",
4. 使用ENV配置
一般情況下使用import.meta.env來獲取文件中的配置
例如嘗試輸出：
console.log(import.meta.env) console.log(import.meta.env.VITE_API_URL)
5.修改 vite.config.js 文件
5.1 使用loadEnv()
在 vite.config.js 中 輸出 import.mjeta.env 會返回undefined。
因為import.meta.env 是在 Vite 服務運行時注入到代碼中的瀏覽器環(huán)境的環(huán)境變量，而vite.config.js編譯的時間在Vite 服務運行之前
此時就要使用到 loadEnv():Vite 提供了 loadEnv 函數(shù)，用于在 Node.js 中加載 .env 文件的環(huán)境變量
import { defineConfig, loadEnv } from 'vite';
export default defineConfig(({ mode }) => {
// 加載當前模式下的環(huán)境變量（包括 .env, .env.[mode] 等）
// 第三個參數(shù)為空字符串，加載所有變量
// const env = loadEnv(mode, process.cwd(), '');
// 或指定前綴（如 'VITE_'）以僅加載特定變量
// const env = loadEnv(mode, process.cwd(), 'VITE_');
// 默認輸出'VITE_'前綴變量
const env = loadEnv(mode, process.cwd());
console.log(env)
return {
server: {
host: '0.0.0.0', // url地址,監(jiān)聽所有網(wǎng)絡接口
port: 3001, // 指定端口號
open: true // 啟動后自動打開瀏覽器
},
};
});
由于輸出的全是字符串變量和規(guī)定的環(huán)境變量類型不太符合，會出問題：
// 直接使用的情況
server: {
host: '0.0.0.0', // url地址,監(jiān)聽所有網(wǎng)絡接口
port: env.VITE_PORT, // 指定端口號
open: env.VITE_OPEN // 啟動后自動打開瀏覽器
},
所以要新建一個getEnv.js文件進行轉換.
5.2 新建getEnv.js文件
export function wrapperEnv(envConf) {
const ret = {};
for (const envName of Object.keys(envConf)) {
let realName = envConf[envName].replace(/\\n/g, "\n");
realName = realName === "true" ? true : realName === "false" ? false : realName;
if (envName === "VITE_PORT") {
realName = Number(realName);
}
if (envName === "VITE_PROXY") {
try {
realName = JSON.parse(realName);
} catch (error) {}
}
ret[envName] = realName;
process.env[envName] = realName;
}
return ret;
}
5.3 最終 vite.config.js文件
import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import {wrapperEnv} from "./src/utils/getEnv.js"; //因為在Node.js執(zhí)行配置文件時，Vite的別名配置尚未生效,所以此處無法用別名 @/utils/getEnv.js
// https://vite.dev/config/
export default defineConfig(({ mode}) => {
//console.log(import.meta.env)
const env = loadEnv(mode, process.cwd())
console.log(env)
const viteEnv = wrapperEnv(env);
console.log(viteEnv)
return {
plugins: [
vue(),
],
resolve: {
alias: {
// 起個別名，在引用資源時，可以用‘@/資源路徑'直接訪問
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
server: {
host: '0.0.0.0', // url地址,監(jiān)聽所有網(wǎng)絡接口
port: viteEnv.VITE_PORT, // 指定端口號
open: viteEnv.VITE_OPEN // 啟動后自動打開瀏覽器
},
}
})
總結
到此這篇關于vue3+js Vite多環(huán)境端口配置以及@別名設置的一次嘗試過程的文章就介紹到這了,更多相關vue3+js Vite多環(huán)境端口配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
由于在項目中需要對數(shù)據(jù)進行可視化處理,也就是用圖表展示,所以下面這篇文章主要給大家介紹了關于vue-echarts如何實現(xiàn)圖表組件封裝的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue下axios攔截器token刷新機制的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
Ant Design Vue table中列超長顯示...并加提示語的實例
這篇文章主要介紹了Ant Design Vue table中列超長顯示...并加提示語的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在實際應用場景中,假如有一個下載或者導出請求,數(shù)據(jù)量非常大的情況下,接口響應的會很慢,這時候我我們想中斷請求,該怎么做呢？本文給大家介紹了axios請求中斷的幾種方法,需要的朋友可以參考下2024-10-10
vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題
這篇文章主要介紹了vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解vue-cli+element-ui樹形表格(多級表格折騰小計)
這篇文章主要介紹了vue-cli + element-ui 樹形表格（多級表格折騰小計），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了vue項目查看vue版本及cli版本的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了淺談Vue.use的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue多語言轉換的幾種方法總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細介紹了Vue實現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05