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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Ant Design Vue table中列超長顯示...并加提示語的實例
這篇文章主要介紹了Ant Design Vue table中列超長顯示...并加提示語的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-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

